A lightweight header for your build with endless combinations to use in conjunction with the meshNav.
Usage
A navbar is a container to wrap branding, a menu and fields into one. The mesh navbar is a simple and lightweight design. We recommend using it to hold the mesh nav.
For more information regarding dropdowns & expanding head over to the the nav page. Check out the examples below.
Notation:
The navbar is prefixed with the navbar class, its recommended you use the nav HTML semantic element like so, <nav class="navbar">.
The navbar usually consists of 2 or 3 child elements, depending on what you require; all of which are entirely optional, see below:
1) Branding -
Branding for your web build, which has no prefixed class, as you can achive it easily with our flex utility classes, see examples for more details.
2) Nav -
The mesh nav (<div class="nav-menu">), full docs can be found out the nav page.
3) Input -
A form element (usually a search bar like above), full docs can be found out the form page.
To add an active link, append one of the li's within the nav-menu with the active class.
The navbar background colour defaults to light grey, along with the text color to whatever default you have specified. To change them please refer to the Colors page
Position
Aligning content within the navbar is done so with our navbar-left, navbar-right, navbar-center classes.
These classes take advantage of the flex nature of the container, positioning nav items using the order property.
Right aligned links
The nav menu will naturally sit on the right hand side of the navbar providing its last in the DOM, if its not, add the navbar-right class to the menu.
Simply add the navbar-left property to the nav-menu. This will ensure links are preserved on the right at desktop only.
Note: If you prefer the nav menu (hamburger) to sit on the left at smaller viewports, re-arrange the nav-btn to sit as the first child of the navbar, see below:
It is positioned relative by default, to change this, simply add our fixed utility class p-fixed and pin-t, pin-l, full-width classes to pin the navbar to the top of the window.
For more information on the position property, head over to Free Code Camp.
Using buttons within your navbar is as easy as inserting the predefined mesh button classes within the container. See the button page for more details.
To add materialistic tabs to the navbar, append the navbar container with the tabs component.
Then apply the navbar-tabs to the navbar element.
This will 0 out padding on the navbar and apply slight padding to the nav-menu and nav-brand elements.
Note: Be sure to add the navbar-dark and tabs-dark if you have a dark background selected like below.
