The top navigation bar is placed at the head of the page:
### Instance
$(document).ready(function() {
$(document).foundation();
})
[Try it Β»](#)
### Instance Analysis
Use `
` to create a standard toolbar. The `.title-area` class defines the website logo area (must be placed inside `li.name`). When the screen becomes smaller, you will see a "menu" button. Foundation's menu will automatically collapse and expand based on the screen size:
On small screens, many options will be hidden due to size constraints. The `li.toggle-topbar menu.icon` class creates a menu button; clicking it will display the hidden options.
**Tip:** Resize the browser window to see the effect.
`.top-bar-section` defines the link section of the navigation. The `.left` class specifies left-aligned links. The `.active` class is used to display the selected item, with a blue background.
**Tip:** If you want the navigation links to be right-aligned, you can change `.left` to `.right`:
### Instance
...
[Try it Β»](#)
You can set both left-aligned and right-aligned at the same time:
### Instance
[Try it Β»](#)
Dividers can be added to the navigation bar using the `.divider` class (vertical line on large screens, horizontal line on small screens):
### Instance
[Try it Β»](#)
* * *
## Navigation Bar Dropdown Menu
The top navigation bar can have dropdown menus.
You can set a dropdown menu by adding the `.has-dropdown` class to the `` element:
### Instance
[Try it Β»](#)
### Dividers
Use the `.divider` class to set dividers in the dropdown menu:
### Instance
[Try it Β»](#)
* * *
## Dropdown Menu Labels
Add a `` element inside `` to set a label (heading) for the dropdown menu:
### Instance
[Try it Β»](#)
### Nested Dropdown Menus
A dropdown menu can be embedded within another dropdown menu:
### Instance
[Try it Β»](#)
### Clickable
By default, the dropdown menu of the navigation bar is displayed when the mouse hovers over it. We can use the `data-options="is_hover: false"` attribute to set the navigation bar to display on click:
### Instance
[Try it Β»](#)
* * *
## Buttons and Icons on the Navigation Bar
You can place icons and buttons on the navigation bar:
### Instance
Button Link
[Try it Β»](#)
You can place icons on the navigation bar. For more icon styles, check out the (#):
### Instance
[Try it Β»](#)
* * *
## Fixed Navigation Bar
The navigation bar can be fixed to the top of the page.
When the page scrolls, the navigation bar will remain fixed at the top.
To fix the navigation bar, simply place it inside a ``:
### Instance
...
[Try it Β»](#)
* * *
## Navigation Bar Absolute Positioning
We can place the navigation bar inside `
` to set the absolute positioning of the navigation bar. When the scrollbar reaches this area, the navigation bar will stay fixed at the top just like a fixed navigation bar:
### Instance
...
[Try it Β»](#)
When you use the `.sticky` class, the top navigation bar will be fixed on all screen