Navigation

<afp-navigation>

Since 1.3.0

stable

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

A navigation component to group navigation items in sidebars or navigation menus.

Home

About

Services

Contact

<afp-navigation>
  <afp-navigation-item>Home</afp-navigation-item>
  <afp-navigation-item active>About</afp-navigation-item>
  <afp-navigation-item>Services</afp-navigation-item>
  <afp-navigation-item>Contact</afp-navigation-item>
</afp-navigation>

<afp-navigation>
  <afp-navigation-item>Home</afp-navigation-item>
  <afp-navigation-item active>About</afp-navigation-item>
  <afp-navigation-item>Services</afp-navigation-item>
  <afp-navigation-item>Contact</afp-navigation-item>
</afp-navigation>

<AfpNavigation>
  <AfpNavigationItem>Home</AfpNavigationItem>
  <AfpNavigationItem active>About</AfpNavigationItem>
  <AfpNavigationItem>Services</AfpNavigationItem>
  <AfpNavigationItem>Contact</AfpNavigationItem>
</AfpNavigation>

<AfpNavigation>
  <AfpNavigationItem>Home</AfpNavigationItem>
  <AfpNavigationItem active>About</AfpNavigationItem>
  <AfpNavigationItem>Services</AfpNavigationItem>
  <AfpNavigationItem>Contact</AfpNavigationItem>
</AfpNavigation>

Examples #

Orientation #

Use the orientation attribute to set the navigation orientation to horizontal.

Home

About

Services

Contact

<afp-navigation orientation="horizontal">
  <afp-navigation-item active>Home</afp-navigation-item>
  <afp-navigation-item>About</afp-navigation-item>
  <afp-navigation-item disabled>Services</afp-navigation-item>
  <afp-navigation-item>Contact</afp-navigation-item>
</afp-navigation>

<afp-navigation [orientation]="'horizontal'">
  <afp-navigation-item active>Home</afp-navigation-item>
  <afp-navigation-item>About</afp-navigation-item>
  <afp-navigation-item disabled>Services</afp-navigation-item>
  <afp-navigation-item>Contact</afp-navigation-item>
</afp-navigation>

<AfpNavigation orientation="horizontal">
  <AfpNavigationItem active>Home</AfpNavigationItem>
  <AfpNavigationItem>About</AfpNavigationItem>
  <AfpNavigationItem disabled>Services</AfpNavigationItem>
  <AfpNavigationItem>Contact</AfpNavigationItem>
</AfpNavigation>

<AfpNavigation :orientation="'horizontal'">
  <AfpNavigationItem active>Home</AfpNavigationItem>
  <AfpNavigationItem>About</AfpNavigationItem>
  <AfpNavigationItem disabled>Services</AfpNavigationItem>
  <AfpNavigationItem>Contact</AfpNavigationItem>
</AfpNavigation>

Customization #

Use the --afp-navigation-gap CSS variable to customize the gap between navigation items.

Home

About

Services

Contact

<afp-navigation style="--afp-navigation-gap: 2rem;">
  <afp-navigation-item active>Home</afp-navigation-item>
  <afp-navigation-item>About</afp-navigation-item>
  <afp-navigation-item>Services</afp-navigation-item>
  <afp-navigation-item>Contact</afp-navigation-item>
</afp-navigation>

<afp-navigation [style]="'--afp-navigation-gap: 2rem;'">
  <afp-navigation-item active>Home</afp-navigation-item>
  <afp-navigation-item>About</afp-navigation-item>
  <afp-navigation-item>Services</afp-navigation-item>
  <afp-navigation-item>Contact</afp-navigation-item>
</afp-navigation>

<AfpNavigation style="--afp-navigation-gap: 2rem;">
  <AfpNavigationItem active>Home</AfpNavigationItem>
  <AfpNavigationItem>About</AfpNavigationItem>
  <AfpNavigationItem>Services</AfpNavigationItem>
  <AfpNavigationItem>Contact</AfpNavigationItem>
</AfpNavigation>

<AfpNavigation :style="'--afp-navigation-gap: 2rem;'">
  <AfpNavigationItem active>Home</AfpNavigationItem>
  <AfpNavigationItem>About</AfpNavigationItem>
  <AfpNavigationItem>Services</AfpNavigationItem>
  <AfpNavigationItem>Contact</AfpNavigationItem>
</AfpNavigation>

Properties

Learn more about properties.

Name Description Reflects

orientation

orientation of navigation

Type

AfpOrientation

Name	Description
`HORIZONTAL`	Horizontal layout orientation.
`VERTICAL`	Vertical layout orientation.

AfpOrientation

Default AfpOrientation.VERTICAL

Slots

Learn more about slots.

Name	Description
`default`	The default slot.

CSS Parts

Learn more about CSS Parts.

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

CSS Custom Properties

Name	Description	Default
`--afp-navigation-gap`	The gap between navigation items.	`--afp-space-xs`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-navigation-item

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/navigation.js';