Navigation Drawers

The NavigationDrawer component is what your users will utilize to navigate through the application. The navigation-drawer is pre-configured to work with or without any router right out the box. Within your application you will generally place the NavigationDrawer as a direct child of MaterialApp.





Below is a collection of simple to complex examples.

Colored Drawer

Navigation drawers can be customized to fit any application’s design. Here we apply a custom background color and an appended content area using the append slot.


When using the mini-variant prop, the drawer will shrink (default 56px) and hide everything inside of v-list except the first element.


A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile. Clicking outside of the drawer will cause it to close.

Navigation drawers can also be positioned on the right side of your application (or an element). This is also useful for creating a side-sheet with auxillary information that may not have any navigation links.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2021-09-02