Search within TutorialsPark

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 Header

Give 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 Header

Give 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 Drawer

Give 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 Header

Give 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 Tabs

Give 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 Tabs

Give it a TRY! » Note: The Default active panel is denoted using class is-active


Material Design Lite : Navigation Layout Classes

MDL Class Description
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)