Магазин

Для бизнеса

The navigation drawer is primarily used to house links to the pages in your application. Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop. It is common to pair drawers with the v-list component using the nav property.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex 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.

Панель навигации может быть размещён внутри карты и плавать над фоновым контентом.

В навигационной панели также есть мини-вариант, который можно управлять с помощью prop mini-variant.sync.

Временная панель находиться над своим приложением и использует холст (наложение), чтобы затемнить фон. Это поведение панели подражает нативной панели меню на мобильном устройстве. Щелчок за пределами ящика приведёт к его закрытию.

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.

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-row we ensure that the drawer and list stack horizontally next to each other.

Using the bottom prop, we are able to relocate our drawer on mobile devices to come from the bottom of the screen. This is an alternative style and only activates once the mobile-break-point is met.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!