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 `:
### 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
YouTip