ffd20b3991
* feat(VerticalNavigation): ability to add sections with divider * lint fix * updating branch. resolving conflicts * reverting app.vue * removing unnecessary style --------- Co-authored-by: Inesh Bose <dev@inesh.xyz>
2.4 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.labelClass- The class of the link label. :u-badge{label="New" class="!rounded-full" variant="subtle"}icon- The icon of the link.iconClass- The class of the link icon.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. ::
Sections
Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the links prop of the VerticalNavigation component.
:component-example{component="vertical-navigation-example-sections"}
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
Config
:component-preset