Navigation Item

<afp-navigation-item>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A navigation item component to be used withing sidebars or navigation menus.

Navigation Item

<afp-navigation-item>Navigation Item</afp-navigation-item>

<afp-navigation-item>Navigation Item</afp-navigation-item>

<AfpNavigationItem>Navigation Item</AfpNavigationItem>

<AfpNavigationItem>Navigation Item</AfpNavigationItem>

Examples #

Details #

Use the details slot and attribute to add additional information to the navigation item.

Search Ctrl

Alerts 23

Application Lorem ipsum

<afp-navigation-item details>
  Search
  <kbd slot="details">Ctrl</kbd>
</afp-navigation-item>
<afp-navigation-item details>
  Alerts
  <afp-badge slot="details" variant="brand" shape="pill">23</afp-badge>
</afp-navigation-item>
<afp-navigation-item details>
  <afp-icon name="box-arrow-in-down-right"></afp-icon>
  Application
  <span slot="details">Lorem ipsum</span>
</afp-navigation-item>

<afp-navigation-item details>
  Search
  <kbd slot="details">Ctrl</kbd>
</afp-navigation-item>
<afp-navigation-item details>
  Alerts
  <afp-badge [slot]="'details'" [variant]="'brand'" [shape]="'pill'">23</afp-badge>
</afp-navigation-item>
<afp-navigation-item details>
  <afp-icon [name]="'box-arrow-in-down-right'"></afp-icon>
  Application
  <span slot="details">Lorem ipsum</span>
</afp-navigation-item>

<AfpNavigationItem details>
  Search
  <kbd slot="details">Ctrl</kbd>
</AfpNavigationItem>
<AfpNavigationItem details>
  Alerts
  <AfpBadge slot="details" variant="brand" shape="pill">23</AfpBadge>
</AfpNavigationItem>
<AfpNavigationItem details>
  <AfpIcon name="box-arrow-in-down-right"></AfpIcon>
  Application
  <span slot="details">Lorem ipsum</span>
</AfpNavigationItem>

<AfpNavigationItem details>
  Search
  <kbd slot="details">Ctrl</kbd>
</AfpNavigationItem>
<AfpNavigationItem details>
  Alerts
  <AfpBadge :slot="'details'" :variant="'brand'" :shape="'pill'">23</AfpBadge>
</AfpNavigationItem>
<AfpNavigationItem details>
  <AfpIcon :name="'box-arrow-in-down-right'"></AfpIcon>
  Application
  <span slot="details">Lorem ipsum</span>
</AfpNavigationItem>

Active #

Use the active attribute to indicate the active state of the navigation item.

Active Item

<afp-navigation-item active>Active Item</afp-navigation-item>

<afp-navigation-item active>Active Item</afp-navigation-item>

<AfpNavigationItem active>Active Item</AfpNavigationItem>

<AfpNavigationItem active>Active Item</AfpNavigationItem>

Link #

Use the href attribute to make the navigation item function as a link.

Go to Example

<afp-navigation-item  href="https://example.com" target="_blank">
  <afp-icon name="box-arrow-in-down-right"></afp-icon>
  Go to Example
</afp-navigation-item>

<afp-navigation-item  [href]="'https://example.com'" [target]="'_blank'">
  <afp-icon [name]="'box-arrow-in-down-right'"></afp-icon>
  Go to Example
</afp-navigation-item>

<AfpNavigationItem  href="https://example.com" target="_blank">
  <AfpIcon name="box-arrow-in-down-right"></AfpIcon>
  Go to Example
</AfpNavigationItem>

<AfpNavigationItem  :href="'https://example.com'" :target="'_blank'">
  <AfpIcon :name="'box-arrow-in-down-right'"></AfpIcon>
  Go to Example
</AfpNavigationItem>

Disabled #

Use the disabled attribute to disable the navigation item.

Disabled Item

<afp-navigation-item disabled>Disabled Item</afp-navigation-item>

<afp-navigation-item disabled>Disabled Item</afp-navigation-item>

<AfpNavigationItem disabled>Disabled Item</AfpNavigationItem>

<AfpNavigationItem disabled>Disabled Item</AfpNavigationItem>

Customizing #

Use CSS custom properties to adjust padding and gap sizes within the navigation item.

Custom

<afp-navigation-item style="--afp-navigation-item-height: 3rem" active>Custom</afp-navigation-item>

<afp-navigation-item [style]="'--afp-navigation-item-height: 3rem'" active>Custom</afp-navigation-item>

<AfpNavigationItem style="--afp-navigation-item-height: 3rem" active>Custom</AfpNavigationItem>

<AfpNavigationItem :style="'--afp-navigation-item-height: 3rem'" active>Custom</AfpNavigationItem>

Properties

Learn more about properties.

Name	Description	Reflects
`value`	The value associated with the navigation item. This is emitted with the afp-click event. Type `string`
`active`	Indicates whether the navigation item is active (highlighted). Type `boolean` Default `false`
`disabled`	Indicates whether the navigation item is disabled. Type `boolean` Default `false`
`href`	Href for navigation item. If set, the item behaves as a link. Type `string`
`target`	Target of link type navigation item Type `AfpTarget`
`details`	Indicates whether the details slot has content. Type `boolean`

Events

Learn more about events.

Name	Return	Description
`afp-click`	`string`	Emitted when the navigation item is clicked.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.
`details`	Slot for additional details or description.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`content`	The content wrapper.	`::part(content)`
`label`	The label wrapper.	`::part(label)`
`details`	The details wrapper.	`::part(details)`

CSS Custom Properties

Name	Description	Default
`--afp-navigation-item-height`	The height of the navigation item.	`--afp-size-xs`
`--afp-navigation-item-padding`	The padding of the navigation item.	`--afp-space-m`
`--afp-navigation-item-hover`	The background color of the navigation item on hover.	`--afp-color-surface-elevated`
`--afp-navigation-item-hover-color`	The text color of the navigation item on hover.	`--afp-color-text`
`--afp-navigation-item-active`	The background color of the active navigation item.	`--afp-color-surface-elevated`
`--afp-navigation-item-active-weight`	The font weight of the active navigation item.	`--afp-font-weight-bold`
`--afp-navigation-item-color`	The text color of the navigation item.	`--afp-color-text`
`--afp-navigation-item-font-weight`	The font weight of the navigation item.	`--afp-font-weight-normal`
`--afp-navigation-item-font-size`	The font size of the navigation item.	`--afp-font-size-m`
`--afp-navigation-item-radius`	The border radius of the regular navigation item.	`--afp-border-radius-m`
`--afp-navigation-item-disabled-opacity`	The opacity of the disabled navigation item.	`0.5`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/navigation-item/navigation-item.js';