Foundation Top Navigation Bar
Top navigation bar placed at the head of the page:
Example
<ul class="title-area">
<li class="name">
<!-- If you don't need the title or icon, you can delete it -->
<h1><a href="#">WebSiteName</a></h1>
</li>
<!-- Collapse button on small screens: Remove.menu-iconclass to remove the icon.
If you need to show only the image, you can delete the "Menu" text -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</section>
</nav>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Try it Yourself »
Example analysis
Usage<nav class="top-bar" data-topbar>Create a standard toolbar..title-areaThe class defines the website logo area (must be placedli.nameinside). When the screen gets smaller, you can see a "menu" button. Foundation's menu automatically collapses and expands according to screen size:
On small screens, many options are hidden due to size.li.toggle-topbar menu.iconThe class creates a menu button; clicking it can display the hidden options.
Tip:Resize the browser window to see the effect.
.top-bar-sectionDefines the link section of the navigation..leftThe class specifies that the links are left-aligned..activeThe 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.leftChange to.right :
You can set left alignment and right alignment at the same time:
Example
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</section>
Try it Yourself »
The navigation bar can be.dividerUse the class to add dividers (vertical lines on large screens, horizontal lines on small screens):
Example
<li class="active"><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">Page 1</a></li>
<li class="divider"></li>
<li><a href="#">Page 2</a></li>
<li class="divider"></li>
<li><a href="#">Page 3</a></li>
<li class="divider"></li>
</ul>
Try it Yourself »
Navigation Bar Dropdown Menu
The top navigation bar can have dropdown menus.
can be achieved by<li>add to element.has-dropdownclass to set the dropdown menu:
Example
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li><a href="#">Second link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
</section>
Try it Yourself »
divider
Usage.dividerclass to set the divider of the dropdown menu:
Example
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><a href="#">Kale</a></li>
<li><a href="#">Spinach</a></li>
</ul>
Dropdown menu label
In<li>adding inside<label>Use the element to set the label (title) of the dropdown menu:
Example
<li><label>Fruit</label></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><label>Vegetable</label></li>
<li><a href="#">Kale</a></li>
<li><a href="#">Spinach</a></li>
</ul>
Nested dropdown menu
The dropdown menu can embed another dropdown menu:
Example
<ul class="left">
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><label>Level 1</label></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="has-dropdown">
<a href="#">New dropdown</a>
<ul class="dropdown">
<li><label>Level 2</label></li>
<li><a href="#">2nd level dropdown</a></li>
<li><a href="#">2nd level dropdown</a></li>
<li class="has-dropdown">
<a href="#">New dropdown</a>
<ul class="dropdown">
<li><label>Level 3</label></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
Try it Yourself »
clickable
By default, the navbar's dropdown menu displays when the mouse moves over it. We can usedata-options="is_hover: false"the attribute to set the navbar to display after a mouse click:
Buttons and Icons on the Navigation Bar
You can place icons and buttons on the navbar:
You can put icons on the navbar. For more image styles, seeFoundation Icons Tutorial:
Example
<!-- Foundation icon styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/foundation-icons.min.css">
</head>
<ul class="left">
<li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
<li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
<li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>
</ul>
Try it Yourself »
Fixed Top Bar
The navigation bar can be fixed at the top of the page.
When the page scrolls, the navigation bar at the top will not move.
To fix the navbar, simply place the navbar in<div class="fixed">Inside is enough:
Absolute positioning of the navigation bar
We can place the navigation bar<div class="sticky">inside to set the absolute positioning of the navigation bar. When the scrollbar scrolls to this area, the navigation bar stays at the top like a fixed navigation bar:
When you use.stickyWhen using the class, the top navigation bar will remain fixed on all screen sizes. If you need to set it on a specific screen, you just need to...<nav>add todata-options="sticky_on: small|medium|large"attribute is enough:
Example
<!-- Only on large screens -->
<nav class="top-bar" data-topbar data-options="sticky_on: large">
..
</nav>
</div>
Or set multiple screen sizes via an array:
Example
<!-- Small screens and large screens (no medium screens)-->
<nav class="top-bar" data-topbar data-options="sticky_on: [small, large]">
..
</nav>
</div>