Nav Tabs

Ready

Nav tabs allow the user to navigate easily.

Code

Props

DxcNavTabs

Name	Default	Description
iconPosition: 'top' \| 'left'	`'top'`	Whether the icon should appear above or to the left of the label.
tabIndex: number	`0`	Value of the tabindex for each tab.

DxcNavTabs.Tab

Name	Default	Description
active: boolean	`false`	Whether the tab is active or not.
disabled: boolean	`false`	Whether the tab is disabled or not.
href: string		Page to be opened when the user clicks on the tab.
icon: node \| string		Element or path used as the icon that will be displayed in the tab.
notificationNumber: boolean \| number	`false`	If 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: string		Content of the tab.

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.

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="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>
  );
}

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.

() => {
  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>
  );
}

NextJS Link

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>
          <CustomNavTab active>Tab 1</CustomNavTab>
        </Link>
        <Link href="/components/nav-tabs/" passHref>
          <CustomNavTab>Tab 2</CustomNavTab>
        </Link>
        <Link href="/components/nav-tabs/" passHref>
          <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>
          <CustomNavTab active>Tab 1</CustomNavTab>
        </Link>
        <Link href="/components/nav-tabs/" passHref>
          <CustomNavTab>Tab 2</CustomNavTab>
        </Link>
        <Link href="/components/nav-tabs/" passHref>
          <CustomNavTab>Tab 3</CustomNavTab>
        </Link>
      </DxcNavTabs>
    </DxcInset>
  );
}

Props

DxcNavTabs

DxcNavTabs.Tab

Examples
Basic usage
Router navigation

Edit this page on GitHub

Link

NextNumber Input

Nav Tabs

Props

DxcNavTabs

DxcNavTabs.Tab

Examples

Basic usage

Router navigation

React router

React router v6

NextJS Link

Contents