<tw-nav-item>Item</tw-nav-item>Nav Item
An item in a navigation. Should always be placed in a navigation group.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
active |
active |
Defines whether the navigation item is active. | boolean |
false |
icon |
icon |
The name of the icon that is displayed in front of the item. | string | undefined |
undefined |
iconStyle |
iconStyle |
The style variant of the icon that is displayed in front of the item. | IconStyle |
"regular" |
href |
href |
When provided, renders the navigation item as a link. | string | undefined |
undefined |
target |
target |
When provided together with a href property, determines where to open the linked URL. | "_self" | "_blank" | "_parent" | "_top" |
"_self" |
Slots
| Name | Description |
|---|---|
sub |
Used for adding a nav group as a sub navigation to the nav item. |
Events
| Name | Description |
|---|---|
selected |
CSS Properties
| Property | Description | Default |
|---|---|---|
--tw-nav-item-color |
The color of a navigation item. Useful for legacy theming. | var(--tw-color-shade-darken-50) |
--tw-nav-item-font-size |
The font size of a navigation item. Useful for legacy theming. | var(--tw-font-size-l) |
--tw-nav-item-font-weight |
The font weight of a navigation item. Useful for legacy theming. | var(--tw-font-weight-medium) |
--tw-nav-item-padding-inline |
The inline padding of a navigation item. Useful for legacy theming. | var(--tw-space-m) |
--tw-nav-item-padding-block |
The block padding of a navigation item. Useful for legacy theming. | var(--tw-space-m) |
--tw-nav-item-gap |
The gap of a navigation item. Useful for legacy theming. | var(--tw-space-l) |
--tw-nav-item-hover-color |
The color of a hovered navigation item. Useful for legacy theming. | var(--tw-color-primary-darken-60) |
--tw-nav-item-hover-background-color |
The background color of a hovered navigation item. Useful for legacy theming. | var(--tw-color-primary-lighten-90) |
--tw-nav-item-active-color |
The color of an active navigation item. Useful for legacy theming. | var(--tw-color-primary) |
--tw-nav-item-active-background-color |
The background color of an active navigation item. Useful for legacy theming. | transparent |
--tw-nav-item-active-icon-display |
The display of an active navigation item icon. Useful for legacy theming. | block |
--tw-nav-item-icon-color |
The color of a navigation item icon. Useful for legacy theming. | var(--tw-color-shade-darken-20) |
--tw-nav-item-sub-font-size |
The font size of a sub navigation item. Useful for legacy theming. | var(--tw-font-size-m) |
--tw-nav-item-sub-gap |
The gap of a sub navigation item. Useful for legacy theming. | var(--tw-space-m) |