Nav Tabs

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

Props

Name	Type	Description	Default
iconPosition	`'top' \| 'left'`	Whether the icon should appear above or to the left of the label.	`'top'`
Required children	`React.ReactNode`	Contains one or more `DxcNavTabs.Tab`.	-
tabIndex	`number`	Value of the `tabindex` attribute applied to each tab.	`0`

DxcNavTabs.Tab

Single tab, part of the set of Navigation Tabs.

Props

Name	Type	Description	Default
active	`boolean`	Whether the tab is active or not.	`false`
disabled	`boolean`	Whether the tab is disabled or not.	`false`
href	`string`	Page to be opened when the user clicks on the tab.	-
icon	`string \| (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_"`.	-
notificationNumber	`boolean \| number`	If 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	`string`	Tab label text.	-

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <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>
  );
}

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.

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

() => {
  return (
    <DxcInset space="2rem">
      <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <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>
  );
}

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

() => {
  const CustomTab = React.forwardRef(
    ({ onClick, replace = false, state, target, to, ...rest }, ref) => {
      let href = useHref(to);
      let handleClick = useLinkClickHandler(to, {
        replace,
        state,
        target,
      });
      return (
        <DxcNavTabs.Tab
          {...rest}
          href={href}
          onClick={(event) => {
            if (!event.defaultPrevented) {
              handleClick(event);
            }
          }}
          ref={ref}
          target={target}
        />
      );
    }
  );

  return (
    <DxcInset space="2rem">
      <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>
  );
}

() => {
  const CustomTab = React.forwardRef(
    ({ onClick, replace = false, state, target, to, ...rest }, ref) => {
      let href = useHref(to);
      let handleClick = useLinkClickHandler(to, {
        replace,
        state,
        target,
      });
      return (
        <DxcNavTabs.Tab
          {...rest}
          href={href}
          onClick={(event) => {
            if (!event.defaultPrevented) {
              handleClick(event);
            }
          }}
          ref={ref}
          target={target}
        />
      );
    }
  );

  return (
    <DxcInset space="2rem">
      <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 = React.forwardRef(({ href, children, ...other }, ref) => {
    return (
      <DxcNavTabs.Tab {...other} href={href}>
        {children}
      </DxcNavTabs.Tab>
    );
  });

  return (
    <DxcInset space="2rem">
      <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>
  );
}

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

  return (
    <DxcInset space="2rem">
      <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="2rem">
      <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <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>
  );
}

Props
DxcNavTabs.Tab
- Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Link

NextNumber Input

Nav Tabs

Props

DxcNavTabs.Tab

Props

Examples

Basic usage

Router navigation

React router

React router v6

NextJS Link

Icons and notifications

Contents