DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Nav tabs

Nav tabs lets users switch between different views or sections within the same page, organizing related content into a clear and accessible layout.

Overview
Code

Props

NameTypeDescriptionDefault
Required
children
React.ReactNodeContains one or more DxcNavTabs.Tab.-
iconPosition'left' | 'top'Whether the icon should appear above or to the left of the label.'left'
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
Required
children
stringTab label text.-
disabledbooleanIf true, the tab will be disabled.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_".-
New
onClick
() => voidThis function will be called when the user clicks on this tab.-
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

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcNavTabs>
        <DxcNavTabs.Tab href="#" active>
          Tab 1
        </DxcNavTabs.Tab>
        <DxcNavTabs.Tab href="#">Tab 2</DxcNavTabs.Tab>
        <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
      </DxcNavTabs>
    </DxcInset>
  );
}

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.

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcNavTabs>
        <RouterLink
          to="/components/nav-tabs/"
          component={DxcNavTabs.Tab}
          active
        >
          Tab 1
        </RouterLink>
        <RouterLink to="/components/nav-tabs/" component={DxcNavTabs.Tab}>
          Tab 2
        </RouterLink>
        <RouterLink to="/components/nav-tabs/" component={DxcNavTabs.Tab}>
          Tab 3
        </RouterLink>
      </DxcNavTabs>
    </DxcInset>
  );
}

React router v6+

In React Router v6 and higher, the prop component is no longer available so it is necessary to use hooks provided by the newer versions of React Router.

() => {
  const CustomTab = forwardRef(
    ({ children, to, replace = false, state, ...rest }, ref) => {
      const navigate = useNavigate();

      const handleClick = () => {
        navigate(to, { replace, state });
      };

      return (
        <DxcNavTabs.Tab
          {...rest}
          onClick={handleClick}
          ref={ref}
        >
          {children}
        </DxcNavTabs.Tab>
      );
    }
  );
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcNavTabs>
        <CustomTab active to="/components/nav-tabs/">
          Tab 1
        </CustomTab>
        <CustomTab to="/components/nav-tabs/">Tab 2</CustomTab>
        <CustomTab to="/components/nav-tabs/">Tab 3</CustomTab>
      </DxcNavTabs>
    </DxcInset>
  );
}

This is an example of NextJS .

() => {
  const CustomNavTab = forwardRef(({ href, children, ...other }, ref) => {
    return (
      <DxcNavTabs.Tab {...other} href={href}>
        {children}
      </DxcNavTabs.Tab>
    );
  });

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcNavTabs>
        <Link href="/components/nav-tabs/" passHref legacyBehavior>
          <CustomNavTab active>Tab 1</CustomNavTab>
        </Link>
        <Link href="/components/nav-tabs/" passHref legacyBehavior>
          <CustomNavTab>Tab 2</CustomNavTab>
        </Link>
        <Link href="/components/nav-tabs/" passHref legacyBehavior>
          <CustomNavTab>Tab 3</CustomNavTab>
        </Link>
      </DxcNavTabs>
    </DxcInset>
  );
}

Icons and notifications

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcNavTabs iconPosition="left">
        <DxcNavTabs.Tab href="#" active icon="favorite" notificationNumber>
          Tab 1
        </DxcNavTabs.Tab>
        <DxcNavTabs.Tab href="#" disabled icon="favorite" notificationNumber={5}>
          Tab 2
        </DxcNavTabs.Tab>
        <DxcNavTabs.Tab href="#" icon="favorite" notificationNumber={120}>
          Tab 3
        </DxcNavTabs.Tab>
      </DxcNavTabs>
    </DxcInset>
  );
}
On this page