Navigation

Basic usage

Negative mode

The Navigation component supports a negative mode, suitable for areas with dark background.

Pre-activated item

You can initialize the Navigation component with a pre-activated tab.

Link navigation

The Navigation component can be leveraged not only to switch tabs in a page, but also to perform complete page navigations.

Custom content

Each Navigation Item can be visually rendered as better suits your needs, as long as the Item provides interactivity.

Notifications

The Navigation component comes with a built-in notifications count functionality.

Preventing users from changing tab

If you want to make sure the user does not accidentally close the currently active tab, you can intercept the tab change event and implement your own custom logic (such as saving unsaved content, asking the user for confirmation, or displaying a Toast notification to inform them that the tab cannot be switched).

Disabled state

Each Navigation Item supports a Disabled state; when activated, the Item remains focusable, but you can provide a tooltip to be displayed on hover and focus aimed to convey further info to the user as to why the tab cannot be activated.