2.0 KiB
title, description, links
| title | description | links | |||||||
|---|---|---|---|---|---|---|---|---|---|
| VerticalNavigation | Display a vertical navigation. |
|
Usage
Pass an array to the links prop of the VerticalNavigation component. Each link can have the following properties:
label- The label of the link.icon- The icon of the link.iconClass- The class of the icon of the link.avatar- The avatar of the link. You can pass all the props of the Avatar component.badge- A badge to display next to the label.click- The click handler of the link.
You can also pass any property from the NuxtLink component such as to, exact, etc.
:component-example{component="vertical-navigation-example"}
::callout{icon="i-heroicons-light-bulb"} Learn how to build a Tailwind like vertical navigation in the Examples page. ::
Slots
You can use slots to customize links display.
default
Use the #default slot to customize the link label. You will have access to the link and isActive properties in the slot scope.
:component-example{component="vertical-navigation-example-default-slot"}
avatar
Use the #avatar slot to customize the link avatar. You will have access to the link and isActive properties in the slot scope.
:component-example{component="vertical-navigation-example-avatar-slot"}
icon
Use the #icon slot to customize the link icon. You will have access to the link and isActive properties in the slot scope.
:component-example{component="vertical-navigation-example-icon-slot"}
badge
Use the #badge slot to customize the link badge. You will have access to the link and isActive properties in the slot scope.
:component-example{component="vertical-navigation-example-badge-slot"}
Props
:component-props
Preset
:component-preset