Navigation

How will you get around your site if you can't navigate? Well I have sailed the seven seas and came up with these solutions for you.

Examples

Default Navbar

Here is a simple navbar to get you started.

Default Default Navbar
<nav class="navbar">
	<a href="#" class="logo">Defiant CSS</a>
	<a href="#" class="navbar-link">Home</a>
	<i class="material-icons nav-toggle">menu</i>
</nav>

Fixed Navbar

If you'd like your navbar to stick to the top of the page then just add the fixed class.

Default Fixed Navbar
<!-- 
<nav class="navbar navbar-fixed">
	<a href="index.html" class="logo">Defiant CSS</a>
	<a href="index.html" class="navbar-link">Home</a>
	<i class="material-icons nav-toggle">menu</i>
</nav> 
-->

Navigation Dropdown Menu

Here you have a dropdown menu for all you cooky people who are into that type of thing. Also I've added support for multiple dropdown menus. Oh Yeah! Please Note that you'll need to have to include the JavaScript file in order for this to work.

Default Navigation Dropdown Menu
<nav class="navbar">
	<a href="#" class="logo">Defiant CSS</a>
	<a href="#" class="navbar-link">Home</a>
	<i class="material-icons nav-toggle">menu</i>
        <div class="dropdown">
		<button class="navbar-link dropdown-toggle">Documentation</button>
		<div class="dropdown-menu">
			<a href="#grid" class="dropdown-menu-link">Grid System</a>
			<a href="#typography" class="dropdown-menu-link">Typography</a>
			<a href="#lists" class="dropdown-menu-link">Lists</a>
			<a href="#images" class="dropdown-menu-link">Images</a>
			<a href="#tables" class="dropdown-menu-link">Tables</a>
			<a href="#buttons" class="dropdown-menu-link">Buttons</a>
			<a href="#forms" class="dropdown-menu-link">Forms</a>
			<a href="#modals" class="dropdown-menu-link">Modals</a>
			<a href="#panels" class="dropdown-menu-link">Panels</a>
			<a href="#cards" class="dropdown-menu-link">Cards</a>
		</div>
	</div>
	<div class="dropdown">
		<button class="navbar-link dropdown-toggle">Examples</button>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-menu-link">Starter Template</a>
		</div>
	</div>
</nav>

Mobile Navigation

What modern site nowadays is worth it's salt without a mobile navigation? If you shrink the page down then click on the navbar menu icon at the top of the page you'll see it in action.

Default Mobile Navigation
<nav class="navbar">
	<a href="#" class="logo">Defiant CSS</a>
	<a href="#" class="navbar-link">Home</a>
	<i class="material-icons nav-toggle">menu</i>
</nav>
<nav class="side-nav">
	<a href="#" class="logo">Defiant CSS</a>
	<a href="#" class="side-nav-link">Home</a>
	<a href="#" class="side-nav-link">Examples</a>
</nav>

Mobile Navigation Submenu

Here you can add multiple levels of submenu to your mobile navigation pretty cool huh? You will need to add the JavaScript file for this to work. Again if you shrink the page down then click on the navbar menu icon at the top of the page you'll see it in action on the mobile menu at the left hand side. Just click the button with the little icon on it..

Default Mobile Navigation Submenu
<nav class="side-nav">
	<a href="#" class="logo">Defiant CSS</a>
	<a href="#" class="side-nav-link">Home</a>
	<button class="side-nav-link submenu-toggle">Components<i class="material-icons">chevron_right</i></button>
	<div class="submenu">
		<a href="#" class="submenu-link">Grid System</a>
		<a href="#" class="submenu-link">Typography</a>
		<a href="#" class="submenu-link">Lists</a>
		<a href="#" class="submenu-link">Images</a>
		<a href="#" class="submenu-link">Tables</a>
		<a href="#" class="submenu-link">Buttons</a>
		<a href="#" class="submenu-link">Forms</a>
		<a href="#" class="submenu-link">Modals</a>
		<a href="#" class="submenu-link">Panels</a>
		<a href="#" class="submenu-link">Cards</a>
	</div>
	<a href="#" class="side-nav-link">Examples</a>
</nav>