Nav Tabs

Nav tabs function in the same way as the tab component but are more focused on navigation across pages or links.


iconPosition: 'top' | 'left''top'Whether the icon should appear above or to the left of the label.
tabIndex: number0Value of the tabindex for each tab.
children: nodeContains one or more DxcNavTabs.Tab.


Single tab, part of the set of Navigation Tabs.


active: booleanfalseWhether the tab is active or not.
disabled: booleanfalseWhether the tab is disabled or not.
href: stringPage to be opened when the user clicks on the tab.
icon: node | stringElement or path used as the icon that will be displayed in the tab.
notificationNumber: boolean | numberfalseIf the value is 'true', an empty badge will appear. If it is 'false', no badge will appear. If a number is put it will be shown as the label of the notification in the tab, taking into account that if that number is greater than 99, it will appear as '+99' in the badge.
children: stringText label of the tab.


Basic usage

Router navigation

There are many React based routers, unfortunately all with different APIs.

So we decided to make our link component just an styled HTML anchor element which allows it to be used in any React based router. For each API is different so here are some examples for React Router and NextJS Link.

React router

This is an example of React Router using the prop component. Note that this Prop is not available in v6.

React router v6

In React Router v6 the prop component is no longer available so it is necessary to use hooks provided by React Router v6.

This is an example of NextJS .