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.
Summary
This lesson covers building a responsive navigation bar for an Angular application using Bootstrap. The instructor demonstrates creating a navbar with a logo/header section, navigation links to different components (Recipes and Shopping List), and a dropdown menu for data management operations. The lesson emphasizes proper Bootstrap class usage, correct HTML structure with semantic elements, and previewing the result using the ng serve command.
Key points
- Creating a navigation bar container with Bootstrap classes (navbar, navbar-collapse) and a fluid container for proper layout
- Adding a navbar-brand element for the logo/header that is clickable and styled as a brand identifier
- Building navigation link lists using the Bootstrap nav class to automatically align items horizontally
- Implementing a dropdown menu with dropdown-toggle and dropdown-menu classes, containing options for data retrieval and storage operations
- Using the navbar-right class to position a secondary list on the right side of the navbar
- Adding a caret (downward arrow) visual indicator to the dropdown to clearly signal it as a menu trigger
FAQ
What Bootstrap classes are essential for building a navbar?
Use the 'navbar' class on the main container, 'navbar-header' for the logo section, 'navbar-collapse' for wrapping navigation links, and 'nav' class on the unordered list to ensure items align horizontally automatically.
How do you create a dropdown menu in the navbar?
Create a list item with the 'dropdown' class, add an anchor tag with 'dropdown-toggle' class and role='button', then include a ul element with the 'dropdown-menu' class to hold the dropdown options.
Why is the caret important in a dropdown menu?
The caret (downward-pointing arrow) provides a visual cue to users that an element is a dropdown menu, making the functionality immediately clear and improving overall user interface clarity.