Commentary
The navbar is a responsive horizontal component that can support images, links, buttons, and dropdown menus. The navbar is more complex than the layout implies. See Six Tips for Navbar Design and also How to Structure Your Navbar for some more interesting views on using navbars.
The navbar parent contains three children: .navbar-left for typically branding
information and a slide-out bar, .navbar-center typically for links to other parts of the site
and .navbar-right for typically widgets and controls and also can hold an optional right side
slide-out component.
The .navbar direct children can also support dropdown menus.
Note that drop-down menus should be used carefully and infrequently.
For a mobile sized screen (ie less than 576px), the order is changed where left and right flexboxes appear first and the center flexbox changes its direction to column with its children row aligned.
By using the .is-mobile class on the parent .navbar element, the navbar children sections will
not be re-ordered. The left, center and right children flex boxes will maintain their row orientation.
Navbar supports preserving the layout for mobile sized screens (ie typically less than 576px) as well.
In this case, care should be taken to ensure that the children will still fit in a row, otherwise they will be wrapped.
The navbar component supports a slide-out bar component activated by a
classic hamburger element. The hamburger will be hidden until the mobile break-point is reached.
The hamburger can be forced to display always by adding the .show-always class.
The slide-out bar component can be left (default) slide in or right slide in.
For mobile sized screens (ie typically less than 576px) a sliding sidebar can be used to provide better screen usage
and more complete navigation. By using the .has-sliding-sidebar class on the parent .navbar element, the navbar child
.navbar-center section will not display. The navigation menu will instead slide out.
This menu can hold many more navigation links than the horizontal navbar section.
Usage
| Classes: | |
|---|---|
.navbar |
defines parent nav element |
.is-mobile |
navbar modifier that maintains direct navbar children |
.navbar-left |
.navbar child block, left adjusted |
.navbar-center |
.navbar child block, centre adjusted; usually holds navigation links |
.navbar-right |
.navbar child block, right adjusted |
.show-bottom-nav |
.navbar-center modifier that emulates a typical mobile app menu.
At mobile breakpoint, fixes item's children at viewport bottom and removes labels. |
.navbar-burger |
styles classic hamburger component in mobile widths |
.has-sidebar |
allows .navbar-burger component to control opening and closing side bar additional navigation |
.main-slide-bar |
defines parent slide out bar; default left entry |
.is-right |
slide bar modifier for right entry |
.show-always |
modifier that always displays hamburger, otherwise hidden for non-mobile width viewports |
.sidebarMenu or .sidebarMenuRight |
main content container for nav links |
.sidebarIconToggle |
hamburger parent |
.sidebarMenuInner |
child content container styles block |
.sidebar-block |
child of .sidebarMenuInner that is an expandable link box for more links |
.icon-nav-horz |
adjusts nav icon + label for horizontal display |
| Dependencies: | |
|---|---|
| File: | navbar.css, slidebar.css |
| Variables for Navbar: | --gap-row, --grid-background, --indicator, --navbar-height, --navbar-z, --padding, --pad-horz, --pad-vert, --size-4, --text-comp |
| Variables for Slide-out Bar: | --bg-main-ter, --element-background, --gap-row, --indicator-text, --link, --mar-horz, --navbar-height, --padding-medium, --pad-vert, --text |
Examples
Basic Navbar
<div class="navbar" role="region" aria-label="Main Navbar">
<div class="navbar-left">
<a href="#basic-navbar">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/goldi3-logo.png" alt="Project Logo Points to Home">
</a>
</div>
<div class="navbar-center">
<nav aria-label="Main Section">
<ul>
<li><a href="#basic-navbar" class="">Home</a></li>
<li><a href="#basic-navbar" class="">About</a></li>
<li><a href="#basic-navbar">Contact</a></li>
</ul>
</nav>
</div>
<div class="navbar-right" role="region" aria-label="Secondary Action Buttons">
<button class="is-primary"><strong>Sign up</strong></button>
<button class="is-grey">Log in</button>
</div>
</div>
Common Navbar
<div class="navbar is-primary" role="region" aria-label="Main Navbar">
<div class="navbar-left">
<a href="#common-navbar" aria-label="Site Logo Points to Home Page">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/goldi3-logo.png" alt="Project Home Logo">
</a>
</div>
<div class="navbar-center">
<nav aria-label="Main Section">
<ul>
<li>
<a href="#common-navbar" class="icon-nav" title="Home Example">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li><a href="#common-navbar" title="About Example">About</a></li>
<li>
<div class="dropdown indicator-white">
<div class="dropdown-trigger" tabindex="0">
<button class="is-primary" aria-haspopup="true" aria-controls="navbar-dropdown-menu2">
<span>More</span>
</button>
</div>
<div class="dropdown-menu" id="navbar-dropdown-menu2">
<nav aria-label="Dropdown Menu">
<ul>
<li><a href="#common-navbar">Contact</a></li>
<li><a href="#common-navbar">Jobs</a></li>
<li><a href="#common-navbar">Report an issue</a></li>
</ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div class="navbar-right">
<div class="buttons">
<button class="is-warning has-hover"><strong>Sign up</strong></button>
<button class="is-grey has-hover">Log in</button>
</div>
</div>
</div>
Navbar with Notification and Avatar Dropdowns
<div class="navbar is-secondary-light is-mobile" role="region" aria-label="Main Navbar" style="max-height: 35vh">
<div class="navbar-left">
<a href="#navbar-with-icons" aria-label="Site Logo Points to Home Page">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/goldi3-logo.png" alt="Project Home Logo">
</a>
</div>
<div class="navbar-center">
<nav aria-label="Main Section">
<ul>
<li>
<a href="#navbar-with-icons" class="icon-nav">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li>
<a href="#navbar-with-icons" class="icon-nav">
<span class="icon-bg-music"></span>
<span>About</span>
</a>
</li>
<li>
<a href="#navbar-with-icons" class="icon-nav">
<span class="icon-bg-phone"></span>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="navbar-right">
<nav>
<ul>
<li>
<div class="dropdown is-right">
<div class="dropdown-trigger" tabindex="0">
<div class="button no-chevron" aria-haspopup="true" aria-controls="navbar-dropdown-notification">
<figure>
<span class="icon-bg-bell"></span>
<span class="badge badge-danger no-border" role="status" aria-label="New notifications">3</span>
</figure>
</div>
</div>
<div class="dropdown-menu" id="navbar-dropdown-notification">
<nav aria-label="Dropdown Menu">
<ul>
<li><a href="#navbar-with-icons">One</a></li>
<li><a href="#navbar-with-icons">Two</a></li>
<li><a href="#navbar-with-icons">Three</a></li>
</ul>
</nav>
</div>
</div>
</li>
<li>
<div class="dropdown is-right">
<div class="dropdown-trigger" tabindex="0">
<div class="dropdown-trigger" tabindex="0">
<div class="button no-chevron" aria-haspopup="true" aria-controls="navbar-dropdown-menu2">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman3.png" alt="Avatar Normal">
</figure>
</div>
</div>
</div>
<div class="dropdown-menu" id="navbar-dropdown-profile">
<nav aria-label="Dropdown Menu">
<ul>
<li><a href="#navbar-with-icons">My Profile</a></li>
<li><a href="#navbar-with-icons">Change Password</a></li>
<li><hr></li>
<li><a href="#navbar-with-icons">Log Out</a></li>
</ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
Navbar with .is-mobile
<div class="navbar is-secondary-light is-mobile" role="region" aria-label="Main Navigation">
<div class="navbar-left">
<a href="#mobile-navbar" aria-label="Site Logo Points to Home Page">
<img src="/goldi3-logo.png" alt="Project Home Logo">
</a>
</div>
<div class="navbar-center">
<nav aria-label="Main Section">
<ul>
<li>
<a href="#mobile-navbar" class="icon-nav">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li>
<a href="#mobile-navbar" class="icon-nav">
<span class="icon-bg-music"></span>
<span>About</span>
</a>
</li>
<li>
<a href="#mobile-navbar" class="icon-nav">
<span class="icon-bg-phone"></span>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="navbar-right">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman3.png" alt="Avatar Normal">
</figure>
</div>
</div>
Navbar with Icons and Left Mobile Sidebar
<div class="navbar is-primary has-sidebar" role="region" aria-label="Main Navigation" style="max-height: 35vh">
<div class="navbar-left">
<div class="main-slide-bar">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu-example">
<label for="openSidebarMenu-example" class="sidebarIconToggle">
<span></span>
<span></span>
<span></span>
<span class="sr-only">Sidebar toggle</span>
</label>
<div class="sidebarMenu">
<div class="sidebarMenuInner" role="region" aria-label="Sliding Side Bar Navigation">
<nav aria-label="Side Nav Primary Block">
<ul>
<li><a class="is-active" href="#navbar-left-sidebar" title="Some Link Example">Some Link</a></li>
<li>
<a href="#navbar-left-sidebar" class="icon-nav-horz" title="Bookmark Example">
<span class="icon-bg-bookmark"></span>
<span>Bookmark</span>
</a>
</li>
<li>
<a href="#navbar-left-sidebar" class="icon-nav-horz" title="Clock Example">
<span class="icon-bg-clock"></span>
<span>Clock</span>
</a>
</li>
<li><a href="#navbar-left-sidebar" class="icon-nav-horz" title="Film Example">
<span class="icon-bg-film"></span>
<span>Film</span>
</a>
</li>
</ul>
</nav>
<div class="sidebar-block">
<input type="checkbox" id="check1">
<label for="check1">More Links</label>
<nav aria-label="Side Nav Secondary Block">
<ul>
<li>
<a href="#navbar-left-sidebar" class="icon-nav-horz" title="Home Example">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li><a href="#navbar-left-sidebar">About</a></li>
<li><a href="#navbar-left-sidebar">Contact</a></li>
<li><a href="#navbar-left-sidebar">Jobs</a></li>
<li><a href="#navbar-left-sidebar">Report an Issue</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<a href="#navbar-left-sidebar" aria-label="Site Logo Points to Home Page">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/goldi3-logo.png" alt="Project Home Logo">
</a>
</div>
<div class="navbar-center">
<nav>
<ul>
<li>
<a href="#navbar-left-sidebar" class="icon-nav">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li>
<a href="#navbar-left-sidebar" class="icon-nav">
<span class="icon-bg-music"></span>
<span>About</span>
</a>
<li>
<div class="dropdown indicator-white">
<div class="dropdown-trigger" tabindex="0">
<button class="is-primary icon-nav" aria-haspopup="true" aria-controls="navbar-dropdown-menu3">
<span class="icon-bg-link"></span>
<span>More</span>
</button>
</div>
<div class="dropdown-menu" id="navbar-dropdown-menu3">
<nav>
<ul>
<li><a href="#navbar-left-sidebar">Contact</a></li>
<li><a href="#navbar-left-sidebar">Jobs</a></li>
<li><a href="#navbar-left-sidebar">Report an issue</a></li>
</ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div class="navbar-right">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman3.png" alt="Avatar Normal">
</figure>
</div>
</div>
Navbar with Icons and Fixed Right Slidebar and Bottom Nav
<div class="navbar is-primary has-sidebar" role="region" aria-label="Main Navigation">
<div class="navbar-left">
<a href="#navbar-right-sidebar" aria-label="Site Logo Points to Home Page">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/goldi3-logo.png" alt="Project Home Logo">
</a>
</div>
<div class="navbar-center show-bottom-nav">
<nav>
<ul>
<li>
<a href="#navbar-right-sidebar" class="icon-nav">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li>
<a href="#navbar-right-sidebar" class="icon-nav">
<span class="icon-bg-music"></span>
<span>About</span>
</a>
<li>
<div class="dropdown indicator-white">
<div class="dropdown-trigger" tabindex="0">
<button class="is-primary icon-nav" aria-haspopup="true" aria-controls="navbar-dropdown-menu4">
<span class="icon-bg-link"></span>
<span>More</span>
</button>
</div>
<div class="dropdown-menu" id="navbar-dropdown-menu4">
<nav>
<ul>
<li><a href="#navbar-right-sidebar">Contact</a></li>
<li><a href="#navbar-right-sidebar">Jobs</a></li>
<li><a href="#navbar-right-sidebar">Report an issue</a></li>
</ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div class="navbar-right">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman3.png" alt="Avatar Normal">
</figure>
<div class="main-slide-bar show-always is-right">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenuRight">
<label class="sidebarIconToggle" for="openSidebarMenuRight">
<span></span>
<span></span>
<span></span>
<span class="sr-only">Sidebar toggle</span>
</label>
<div class="sidebarMenuRight">
<div class="sidebarMenuInner" role="region" aria-label="Sliding Side Bar Navigation Right Side">
<nav>
<ul>
<li><a href="#navbar-right-sidebar" title="Some LinkExample">Some Link</a></li>
<li>
<a href="#navbar-right-sidebar" class="icon-nav-horz" title="Bookmark Example">
<span class="icon-bg-bookmark"></span>
<span>Bookmark</span>
</a>
</li>
<li>
<a href="#navbar-right-sidebar" class="icon-nav-horz" title="Clock Example">
<span class="icon-bg-clock"></span>
<span>Clock</span>
</a>
</li>
<li>
<a href="#navbar-right-sidebar" class="icon-nav-horz" title="Film Example">
<span class="icon-bg-film"></span>
<span>Film</span>
</a>
</li>
<li>
<div class="sidebar-block">
<input type="checkbox" id="checkRight">
<label for="checkRight">More Links</label>
<nav>
<ul>
<li>
<a href="#common-navbar" class="icon-nav-horz" title="Home Example">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li><a href="#navbar-right-sidebar">About</a></li>
<li><a href="#navbar-right-sidebar">Contact</a></li>
<li><a href="#navbar-right-sidebar">Jobs</a></li>
<li><a href="#navbar-right-sidebar">Report an Issue</a></li>
</ul>
</nav>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>