How to toggle between links in ember js?

enter image description here

Hi, i am new to ember js. Can someone please help me with my code? I have created this but i don't know how can i give action to each links. When i click on BreakFast, it should only show me 3 search box(BreadType, cheeseType and meatType) only and other should hide. same for Lunch and Drinks. i have also created route for menu in router.

--------------/////application.hbs

<h1>Welcome!!</h1>
     BreakFast
     Lunch
     Drinks
    

-------------/////menu.hbs

<div>
        <p>Hello from BreakFast</p>
        <label>
            Bread Type:
            Cheese Type:
            Meat Type:
        </label>
    </div>
<div>
    <p>Hello from Lunch</p>
    <label>
        Calories:
        Price:
        Veg/Non-veg:
        <select>
            <option>V</option>
            <option>N</option>
        </select>
    </label>
</div>
<div>
    <p>Hello from Drinks</p>
    <label>
        Drink Name:
        Price :
        Ice: <select><option>Y</option>
                     <option>N</option>
            </select>
    </label>
</div>