Angular - 3.7 Add a navigation bar

The header currently shows a bare <h1>, which looks unfinished. To turn it into a real navigation bar we lean on Bootstrap's navbar classes. The whole thing lives inside a nav.navbar element wrapping a div.container-fluid that hosts three areas: a clickable brand on the left, the main navigation in the middle and a management dropdown on the right.

The brand is a simple anchor tag with the navbar-brand class. Its href is set to # for now — routing will replace it later — and the visible label reads Livre de recettes to match the application theme. Right after, a collapsible div.collapse.navbar-collapse wraps the navigation links so Bootstrap can handle the responsive layout without extra effort.

Building the link list

Inside the collapsible container we group the navigation entries into a <ul class="nav navbar-nav">. Each <li> holds an anchor pointing to # for now: the first link will go to the recipes section, the second to the shopping list:

• <a href="#">Recipes</a> — main entry point for the recipe book.
• <a href="#">Shopping list</a> — the second feature area.
• Both links will be turned into router links in a later section.

To the right of the bar we add a second <ul class="nav navbar-nav navbar-right"> containing a single dropdown. The dropdown trigger is a Bootstrap-styled anchor with dropdown-toggle and a small <span class="caret"> at the end to hint visually that the entry expands. The dropdown menu hosts two future actions: fetching recipes from the server and saving them back. The dropdown JavaScript is not wired in yet — we will handle it after the directives chapter — but the visual result is already a proper, responsive header for the application.