Navigation Drawer

The Material WordPress theme drawer displays the name or logo of the website, its logo, contains three different positions for navigation menus and three different widget areas.

Anatomy

  1. Header (Website name or logo and description)
  2. Widget Area – Position Drawer Top
  3. Navigation Menu – Position Drawer Menu
  4. Widget Area – Position Drawer Middle
  5. Navigation Menu – Position Drawer Bottom Menu
  6. Widget Area – Position Drawer Bottom
  7. Navigation Menu – Position Drawer Action Menu

Customization

The drawer can be customized within the WordPress customizer (WordPress Admin >> Appearance >> Customize >> “Theme Settings >> Drawer”).

No desktop drawer button

Hides the hamburger button which opens the navigation drawer on larger screens.

Show or hide the drawer header

Variations

The default drawer style is “modal” which swipes the navigation above the content area.

Other available variations are “dismissible”, “permanent” and “permanent (large screen), dismissible (small screen)”. In contrast to the modal drawer all those styles show the navigation drawer next to the content area and thus reduce its available space.

While the dismissible drawer can be opened or closed by the user, the permanent drawer is always visible. The mix between dismissible and permanent makes it possible to always show the drawer on large screens and enables the website visitor to show/hide it on smaller screens.

Show drawer below Top App Bar

If the drawer is shown below the top app bar then the header will be removed from the drawer.

Expandable Submenus

By default submenus within a drawer menu are collapsed. By clicking on the small arrow or the parent menu name then the submenu will expand. By disabling this feature all menu items will be always visible.

Display Search

By activating this option a search field will be shown above the drawer menu.