MDL : Navigation Layout
How to use Material Design Lite to create Navigation Layout
Material Design Lite (MDL) : Navigations Layout
Material Design Lite(MDL) component navigation layout is used to create Responsive Navigation Layouts with all features of MDL design language.
The MDL Navigation Layout is adaptable to screens of all sizes, browsers and devices
The Most Critical Feature of the MDL Navigation Layout is the Accessibilty, page design and presentation which improves the User Experience greatly.
MDL Navigation Layout Component simplifies the task of creating scaleable pages using multiple reusable components, thus maintaining consistent user experiences
Material Design Lite(MDL) Layout : Fixed Drawer without Header
A MDL Navigation Layout with Fixed Drawer without header is created using class mdl-layout--fixed-drawer.
It creates a Drawer which is always visible and open in large screen displays.
Example: Material Design Lite (MDL) Fixed Drawer without HeaderGive it a TRY! » Note:There are no Header elements , hence no header navigation bar.
Material Design Lite(MDL) : Navigation Layout Fixed Header
A MDL Navigation with Fixed Header is created using class mdl-layout--fixed-header , within the outermost div container.
The Header links are defined within the class mdl-layout--large-screen-only to create make the elements visible on large screens only.
Example: Material Design Lite (MDL) Navigation Layout Fixed HeaderGive it a TRY! » Note:The Header is always visible, regardless of the display size.
Material Design Lite(MDL) Navigation : Fixed Header and Drawer
A MDL Navigation with Fixed Header and Drawer is created using two classes for both fixed header and fixed drawer.
The MDL Class mdl-layout--fixed-header creates fixed header visible on even smaller displays.
The MDL Class mdl-layout--fixed-drawer creates a drawer which is visible and open in large sized display
Example: Material Design Lite (MDL) Navigation Layout Fixed Header and DrawerGive it a TRY! » Note:The meaning of additional classes used can be seen in reference.
Material Design Lite(MDL) : Navigation Layout Scrollable Header
A MDL Navigation layout with Scrollable Header is created using class mdl-layout__header--scroll
It creates a Navigation layout where the header is scrollable with the content.
Example: Material Design Lite (MDL) Navigation Layout Scrollable HeaderGive it a TRY! » Note: The class mdl-layout-spacer is used to align elements to right.
Material Design Lite(MDL) : Scrollable Tabs
A MDL Navigation layout with scrollable tabs is created using class mdl-layout__tab-bar as a container for the tab elements.
Individual tab links are defined within class mdl-layout__tab , while class mdl-layout__tab-panel creates tab panels.
Example: Material Design Lite (MDL) Scrollable TabsGive it a TRY! » Note: The Class is-active is used to denote the default active class.
Material Design Lite(MDL) : Fixed Tabs
A MDL Navigation Layout with Fixed Tabs is created using class mdl-layout--fixed-tabs
It is used in Combination with class mdl-layout--fixed-header to create a fixed tabs instead of scrollable ones.
Example: Material Design Lite (MDL) Fixed TabsGive it a TRY! » Note: The Default active panel is denoted using class is-active
Material Design Lite : Navigation Layout Classes
|mdl-layout||To Define a div element as a Container of Navigation layout|
|mdl-js-layout||To Assign a MDL behaviour to layout component.|
|mdl-layout__header||To Define a Container of the Layout Header.|
|mdl-layout-icon||To Set the icon of the menu, icon is hidden complete menu is visible.|
|mdl-layout__header-row||To Create a Container of MDL header row|
|mdl-layout-title||To Define the layout's title text.|
|mdl-layout-spacer||To Insert a spacer within the layout.|
|mdl-navigation||To Define a nav element as a container for navigation group.|
|mdl-navigation__link||To Define an anchor as MDL Navigation link.|
|mdl-layout__drawer||To a div element as a container for MDL layout drawer.|
|mdl-layout__content||To Define a container of the layout content.|
|mdl-layout__header--scroll||When applied, makes the header to scroll along with the content.|
|mdl-layout--fixed-header||To Make the header visible, on small displays|
|mdl-layout--large-screen-only||To Hide elements on smaller displays.|
|mdl-layout--small-screen-only||To hide elements on large sized displays.|
|mdl-layout__header--waterfall||To create a waterfall effect navigation bar with multiple header lines.|
|mdl-layout__header--transparent||To make the navigation bar transparent.|
|mdl-layout__tab-bar||To define a div element as a MDL tab bar.|
|mdl-layout__tab||To Define an anchor element as a tab link|
|is-active||To assign a tab as default active tab|
|mdl-layout__tab-panel||To define a container as tab content panel|
|mdl-layout--fixed-tabs||To define fixed tabs instead instead of scrollable tabs(default)|