If you are using
app property enabled, you don't need to use
absolute prop as in examples.
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.
Permanent floating drawer
By default, a navigation drawer has a 1px right border that separates it from content. In this example we want to detach the drawer from the left side and let it float on its own. The floating property removes the right border (or left if using right).
When using the mini-variant prop, the drawer will shrink (default 80px) and hide everything inside of
v-list except the first element. In this example we use the .sync modifier that allows us to tie the expanding/contracting of the drawer programmatically.
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. When using RTL you must explicitly define right for your drawer.
Expand on hover
Places the component in mini-variant mode and expands once hovered. Does not alter the content area. Width can be controlled with the mini-variant-width property.
Apply a custom background to your drawer. If you need to customize
v-img's properties you can use the img slot.
In this example we define a custom width to accommodate our nested drawer. Using
v-layout we ensure that the drawer and list stack horizontally next to each other.