Navbar

Defines different styles for the navigation bar.

Usage

The Navbar component consists of the navbar itself and one or more navigations.

Class Description
.f-navbar Add this class to a <nav> element to define the Navbar component.
.f-navbar-nav Add this class to a <ul> element to create a navigation. Use <a> elements as menu items within the list.
.f-active Add this class to a list item to apply an active state.
.f-parent Add this class to indicate a parent menu item.

Example

Markup

<nav class="f-navbar">
	<ul class="f-navbar-nav">
		<li class="f-active"><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li class="f-parent"><a href="">...</a></li>
	</ul>
</nav>

Navbar flip

Add the .f-navbar-flip class to a <div> element to group and align navigations and items to the right.

Example

Markup

<nav class="f-navbar">
	<div class="f-navbar-flip">
		<ul class="f-navbar-nav">
			<li><a href="">...</a></li>
		</ul>
	</div>
</nav>

Navbar subtitle

Add the .f-navbar-nav-subtitle class to an <a> element in the list item to indicate that it has a subtitle. Use a <div> element for the subtitle itself.

Example

Markup

<nav class="f-navbar">
	<ul class="f-navbar-nav">
		<li><a href="" class="f-navbar-nav-subtitle">
			...
			<div>...</div>
		</a></li>
	</ul>
</nav>

Content

You can also add custom content to the navbar, like text, icons, buttons, forms or even a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Off-canvas component.

Class Description
.f-navbar-content Add this class to a <div> element, which serves as a container for your custom content. The content will be centered vertically.
.f-navbar-brand Add this class to an <a> or <div> element to indicate your brand.
.f-navbar-center Add this class to center your navbar content or brand. The element needs to be the last child in the navbar.
.f-navbar-toggle Add this class to an <a> or <div> element to create an icon as a toggle.
.f-navbar-toggle-alt Add this class to create an alternative icon as a toggle.

Example

Markup

<nav class="f-navbar">
	<a href="" class="f-navbar-brand">...</a>
	<ul class="f-navbar-nav">...</ul>
	<div class="f-navbar-content">...</div>
	<div class="f-navbar-content f-navbar-center">...</div>
	<a href="" class="f-navbar-toggle"></a>
</nav>

Responsive visibility

To hide or display certain navbar items, just add one of the responsive visibility classes from the Utility component. This comes in handy, if you want to use a toggle to trigger a mobile navigation for example.

Example

Resize your browser window to see it in action.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Markup

<nav class="f-navbar">
	<ul class="f-navbar-nav f-hidden-small">...</ul>
	<a href="#my-id" class="f-navbar-toggle f-visible-small" data-f-offcanvas></a>
</nav>

<div id="my-id" class="f-offcanvas">
	...
</div>

NOTE In this example we added an off-canvas sidebar fron the Off-canvas component.


Modifiers

To display the navbar in a different style, just add modifier classes. These modifiers can be combined with each other

Navbar attached

Add the .f-navbar-attached class to optimize the navbar's styling to be attached to the top of the viewport. For example, rounded corners will be removed.

Example

Markup

<nav class="f-navbar f-navbar-attached">...</nav>

A navbar can contain a dropdown from the Dropdown component. Just add the .f-dropdown-navbar modifier to the dropdown, so it fits perfectly into the navbar's styling.

Example