Nav Tabs

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

Props

NameTypeDescriptionDefault
iconPosition'top' | 'left'Whether the icon should appear above or to the left of the label.'top'
Required
children
React.ReactNodeContains one or more DxcNavTabs.Tab.-
tabIndexnumberValue of the tabindex attribute applied to each tab.0

DxcNavTabs.Tab

Single tab, part of the set of Navigation Tabs.

Props

NameTypeDescriptionDefault
activebooleanWhether the tab is active or not.false
disabledbooleanWhether the tab is disabled or not.false
hrefstringPage to be opened when the user clicks on the tab.-
iconstring | (React.ReactNode & React.SVGProps <SVGSVGElement>)Material Symbol name or SVG element as the icon that will be displayed in the tab. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_".-
notificationNumberboolean | numberIf true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a number is specified, the component will display a badge with the value as its label. Take into account that if that number is greater than 99, it will appear as +99 in the badge.false
Required
children
stringTab label text.-

Examples

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 .

Icons and notifications