Navigation
Navigation enables users to move through the different sections and page of the site. The navigation buttons are used to switching between between pages or to scolling to other parts of the current screen.
Navigations can also bring non-visible sections in view.
Clearly the navigation used for the site can also be componentized!
Default Navigation Bar
A simple navigation component for a site with only a few pages. Since there are only a few links no mobile version is needed. For a mobile 'slide-in' component see the navigation component immediatly below.
The navbar is fully wrapped in an HTML5 Nav tag.
Extended Navbar with Tabs
And with a mobile menu! This is a very versatile component that offers a lot of possibilities. Make sure the data-target value in the mobile menu trigger (hamburger icon) corresponds with the ID of the mobile menu, #mobile-1 in this case.
The mobile menu has been 'translated' off the screen, and to view it for design and editing purposes I use this little trick:
First select the mobile menu in the Tree on the Elements pane. (An easy way to get 'close' is to click on the hamburger icon here in the canvas, then on the Element pane find the element with the orange colored ID). Once selected the mobile navigation needs to be translated back in view. This is done on the Design pane in the Effects section. Just don't forget to reset this style before Exporting or Publishing!
Another thing to note is that the mobile navigation and desktop navigation are separate elements. This offers a lot of flexibility. You might, for example, decide to only display part of your links on wide screen and make the full nav available through the trigger. To always display the mobile trigger simply set the display to block (in the Layout section on the Design pane) after the second Materialize (colored) breakpoint.
Mega Menu
If you have a lot of links on your plate you might want to keep the default design as clean as possible, but give the user the posibility to view all navigational possiblities with a single click of a button.
Enter the Mega Menu.
Clicking the trigger icon on the left transitions in a container in which you can stick all types of navigation items. At the top I added an intuitive navigation bar with icons. This is followed by 2 buttons that popout a sub menu, followed by 2 link lists... The point being, you really can stick anything in there, just remember to keep it decent.
