Nav Tabs API - React Magma

The NavTabs component is a navigation element that is styled similarly to the Tabs component. While they appear visually similar, the NavTabs component is used for navigation between pages (or parts of a page), while the Tabs component is used to toggle the display of different tab panels on a single page.

Basic Usage

The NavTabs component represents the navigation container, and the NavTab component represents each individual navigation link. The isActive prop can be used to indicate the current page.

The to prop is used to set the link's href.

import React from 'react';

import { NavTab, NavTabs } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs aria-label="Nav Tabs">
      <NavTab isActive to="javascript:void(0)">
        Current Page
      </NavTab>
      <NavTab to="http://google.com">Link to Google</NavTab>
    </NavTabs>
  );
}

Vertical Tabs

The orientation prop can be used to display nav tabs vertically, instead of horizontally.
The orientation prop is an enum that accepts either horizontal or vertical with horizontal being the default. This prop is specified on the NavTabs component.

import React from 'react';

import { NavTab, NavTabs, TabsOrientation } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs
      aria-label="Vertical Nav Tabs"
      orientation={TabsOrientation.vertical}
    >
      <NavTab isActive to="javascript:void(0)">
        Link 1
      </NavTab>
      <NavTab to="javascript:void(0)">Link 2</NavTab>
    </NavTabs>
  );
}

Custom Component

By default, the nav tabs will render an a tag, using the to prop for its href. However, you can use a custom element instead, by using the component prop. In this case, the children should be placed inside the component prop, instead of putting content directly inside each NavTab. The to prop directly on the NavTab (instead of the component) will be also ignored.

import React from 'react';

import { NavTab, NavTabs } from 'react-magma-dom';

export function Example() {
  // We support Link components from libraries such as react-router/reach-router/gatsby that use the `to` prop in place of `href`
  const Link = ({ to, children, ...rest }) => (
    <a href={to} {...rest}>
      {children}
    </a>
  );
  return (
    <NavTabs aria-label="Sample Custom Component Navigation Tabs">
      <NavTab component={<Link to="./">Main page</Link>} />
      <NavTab component={<Link to="./">FAQ</Link>} />
      <NavTab isActive component={<Link to="./">About us</Link>} />
    </NavTabs>
  );
}

Border Position

By default, horizontal nav tabs have the indicator placed underneath the tabs. However, it is possible to display the indicator on the top edge of the nav tabs.

Caution: Displaying nav tabs below their associated content panel is most commonly used for navigation that appears at the bottom of the viewport on mobile devices. Using this same pattern for a simple set of tabbed content on a page could be unfamiliar and confusing to the user, and should not be used without proper user-testing.

The borderPosition prop is an enum and accepts top or bottom for horizontal tabs. The borderPosition prop is specified on the Tabs component and will apply to each individual tab.

import React from 'react';

import { NavTab, NavTabs, TabsBorderPosition } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs
      aria-label="Border Top Nav Tabs"
      borderPosition={TabsBorderPosition.top}
    >
      <NavTab isActive to="javascript:void(0)">
        Link 1
      </NavTab>
      <NavTab to="javascript:void(0)">Link 2</NavTab>
    </NavTabs>
  );
}

Border Position (vertical)

By default, vertical nav tabs have the indicator placed to the left. However, there are times you may want to place the indicator to the right of the tabs, such as when the tab menu is displayed to the left of its content. The borderPosition prop is an enum and accepts left or right for horizontal tabs.

The borderPosition prop is specified on the NavTabs component and will apply to each individual tab.

import React from 'react';

import {
  NavTab,
  NavTabs,
  TabsBorderPosition,
  TabsOrientation,
} from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs
      aria-label="Border Right Nav Tabs"
      borderPosition={TabsBorderPosition.right}
      orientation={TabsOrientation.vertical}
    >
      <NavTab isActive to="javascript:void(0)">
        Link 1
      </NavTab>
      <NavTab to="javascript:void(0)">Link 2</NavTab>
    </NavTabs>
  );
}

Alignment

The alignment prop determines whether the nav tabs are aligned left, right or center. Left is the default.

import React from 'react';

import { NavTab, NavTabs, TabsAlignment } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs
      aria-label="Center Aligned Nav Tabs"
      alignment={TabsAlignment.center}
    >
      <NavTab isActive to="javascript:void(0)">
        Link 1
      </NavTab>
      <NavTab to="javascript:void(0)">Link 2</NavTab>
    </NavTabs>
  );
}

import React from 'react';

import { NavTab, NavTabs, TabsAlignment } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs
      aria-label="Right Aligned Nav Tabs"
      alignment={TabsAlignment.right}
    >
      <NavTab isActive to="javascript:void(0)">
        Link 1
      </NavTab>
      <NavTab to="javascript:void(0)">Link 2</NavTab>
    </NavTabs>
  );
}

Text Transform

For all NavTabs

Options for the textTransform prop for navtabs include uppercase and none, with uppercase (all caps) being the default value. This sets the CSS text-transform property.

import React from 'react';

import { NavTabs, NavTab, TabsTextTransform } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <NavTabs textTransform={TabsTextTransform.uppercase}>
        <NavTab isActive to="javascript:void(0)">
          First uppercase
        </NavTab>
        <NavTab to="javascript:void(0)">Second uppercase</NavTab>
      </NavTabs>
      <br />
      <br />
      <br />
      <NavTabs textTransform={TabsTextTransform.none}>
        <NavTab isActive to="javascript:void(0)">
          First lowercase
        </NavTab>
        <NavTab to="javascript:void(0)">Second lowercase</NavTab>
      </NavTabs>
    </>
  );
}

For a certain Tab

textTransform prop can also be used for NavTab component.

import React from 'react';

import { NavTabs, NavTab, TabsTextTransform } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs>
      <NavTab isActive to="javascript:void(0)">
        All caps (default)
      </NavTab>
      <NavTab to="javascript:void(0)" textTransform={TabsTextTransform.none}>
        No Text Transform
      </NavTab>
      <NavTab
        to="javascript:void(0)"
        textTransform={TabsTextTransform.uppercase}
      >
        Uppercase transform
      </NavTab>
    </NavTabs>
  );
}

Text Transform

For all NavTabs

Options for the textTransform prop for navtabs include uppercase and none, with uppercase (all caps) being the default value. This sets the CSS text-transform property.

import React from 'react';

import { NavTabs, NavTab, TabsTextTransform } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <NavTabs textTransform={TabsTextTransform.uppercase}>
        <NavTab isActive to="#">
          First uppercase
        </NavTab>
        <NavTab to="#">Second uppercase</NavTab>
      </NavTabs>
      <br />
      <br />
      <br />
      <NavTabs textTransform={TabsTextTransform.none}>
        <NavTab isActive to="#">
          First lowercase
        </NavTab>
        <NavTab to="#">Second lowercase</NavTab>
      </NavTabs>
    </>
  );
}

For a certain Tab

textTransform prop can also be used for NavTab component.

import React from 'react';

import { NavTabs, NavTab, TabsTextTransform } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs>
      <NavTab isActive to="#">
        All caps (default)
      </NavTab>
      <NavTab to="#" textTransform={TabsTextTransform.none}>
        No Text Transform
      </NavTab>
      <NavTab to="#" textTransform={TabsTextTransform.uppercase}>
        Uppercase transform
      </NavTab>
    </NavTabs>
  );
}

Full-Width

The isFullWidth prop is an optional boolean that will cause the tabs to take up the full width of their container. The isFullWidth prop is specified on the NavTabs component.

Full width tabs work best when inside a smaller container.

import React from 'react';

import { NavTab, NavTabs } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs aria-label="Full-Width Nav Tabs" isFullWidth>
      <NavTab isActive to="javascript:void(0)">
        Link 1
      </NavTab>
      <NavTab to="javascript:void(0)">Link 2</NavTab>
    </NavTabs>
  );
}

Scrollable

import React from 'react';

import { NavTab, NavTabs, magma } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs
      aria-label="Sample Scrollable Nav Tabs"
      backgroundColor={magma.colors.neutral200}
    >
      <NavTab to="javascript:void(0)">
        First item with a longer text label
      </NavTab>
      <NavTab to="javascript:void(0)">Second item</NavTab>
      <NavTab to="javascript:void(0)">Third item</NavTab>
      <NavTab to="javascript:void(0)">Fourth item</NavTab>
      <NavTab to="javascript:void(0)">Fifth item</NavTab>
      <NavTab to="javascript:void(0)">Sixth item</NavTab>
      <NavTab to="javascript:void(0)">Seventh item</NavTab>
      <NavTab to="javascript:void(0)">Eighth item</NavTab>
    </NavTabs>
  );
}

Scrollable Vertical Tabs

import React from 'react';

import { NavTab, NavTabs, TabsOrientation, magma } from 'react-magma-dom';

export function Example() {
  return (
    <div style={{ display: 'flex', height: '200px', overflow: 'hidden' }}>
      <NavTabs
        aria-label="Sample Scrollable Vertical Nav Tabs"
        backgroundColor={magma.colors.neutral200}
        orientation={TabsOrientation.vertical}
      >
        <NavTab to="javascript:void(0)">First item</NavTab>
        <NavTab to="javascript:void(0)">Second item</NavTab>
        <NavTab to="javascript:void(0)">Third item</NavTab>
        <NavTab to="javascript:void(0)">Fourth item</NavTab>
        <NavTab to="javascript:void(0)">Fifth item</NavTab>
        <NavTab to="javascript:void(0)">Sixth item</NavTab>
      </NavTabs>
    </div>
  );
}

Icon Tabs

The icon prop can be used to display an icon inside the individual NavTab components.

Icon Only

NavTab components without children can be used to display an icon only version of the tabs. Be sure to include an aria-label for each tab, when using this pattern.

import React from 'react';

import { NavTab, NavTabs } from 'react-magma-dom';
import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <NavTabs aria-label="Icon Only Nav Tabs">
      <NavTab
        aria-label="Email"
        icon={<EmailIcon />}
        to="javascript:void(0)"
        isActive
      />
      <NavTab
        aria-label="Android"
        icon={<AndroidIcon />}
        to="javascript:void(0)"
      />
      <NavTab
        aria-label="Notifications"
        icon={<NotificationsIcon />}
        to="javascript:void(0)"
      />
    </NavTabs>
  );
}

Icon with Text

NavTab components with children and icon prop will display both the icon and the children. By default, the icons appear above the children.

import React from 'react';

import { NavTab, NavTabs } from 'react-magma-dom';
import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <NavTabs aria-label="Icon with Text Nav Tabs" isFullWidth>
      <NavTab icon={<EmailIcon />} isActive to="javascript:void(0)">
        First item with a longer text label
      </NavTab>
      <NavTab icon={<AndroidIcon />} to="javascript:void(0)">
        Second item
      </NavTab>
      <NavTab icon={<NotificationsIcon />} to="javascript:void(0)">
        Third item
      </NavTab>
    </NavTabs>
  );
}

Vertical with Icon

import React from 'react';

import { NavTab, NavTabs, TabsOrientation } from 'react-magma-dom';
import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <NavTabs
      aria-label="Vertical Icon with Text Nav Tabs"
      orientation={TabsOrientation.vertical}
    >
      <NavTab icon={<EmailIcon />} isActive to="javascript:void(0)">
        First item with a longer text label
      </NavTab>
      <NavTab icon={<AndroidIcon />} to="javascript:void(0)">
        Second item
      </NavTab>
      <NavTab icon={<NotificationsIcon />} to="javascript:void(0)">
        Third item
      </NavTab>
    </NavTabs>
  );
}

Icon Position

The iconPosition prop can be used to position the icon relative to the children.
The iconPosition prop is an enum that accepts left, top, right or bottom with top being the default for horizontal tabs. This prop is specified on the NavTabs component.

import React from 'react';

import { NavTab, NavTabs, TabsIconPosition } from 'react-magma-dom';
import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <>
      <NavTabs
        aria-label="Icon Position Left Nav Tabs"
        iconPosition={TabsIconPosition.left}
      >
        <NavTab icon={<EmailIcon />} isActive to="javascript:void(0)">
          First item with a longer text label
        </NavTab>
        <NavTab icon={<AndroidIcon />} to="javascript:void(0)">
          Second item
        </NavTab>
        <NavTab icon={<NotificationsIcon />} to="javascript:void(0)">
          Third item
        </NavTab>
      </NavTabs>

      <br />
      <br />
      <br />

      <NavTabs
        aria-label="Icon Position Right Nav Tabs"
        iconPosition={TabsIconPosition.right}
      >
        <NavTab icon={<EmailIcon />} isActive to="javascript:void(0)">
          First item with a longer text label
        </NavTab>
        <NavTab icon={<AndroidIcon />} to="javascript:void(0)">
          Second item
        </NavTab>
        <NavTab icon={<NotificationsIcon />} to="javascript:void(0)">
          Third item
        </NavTab>
      </NavTabs>
    </>
  );
}

Inverse

The isInverse property is an optional boolean, that reverses the colors so that the tabs can better appear on a dark background. It is applied to the Tabs component.

With Blue Background

import React from 'react';

import { Card, CardBody, NavTab, NavTabs } from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <NavTabs aria-label="Sample Inverse Colors Nav Tabs" isInverse>
          <NavTab isActive to="javascript:void(0)">
            First link
          </NavTab>
          <NavTab to="javascript:void(0)">Second link</NavTab>
          <NavTab to="javascript:void(0)">Third link</NavTab>
        </NavTabs>
      </CardBody>
    </Card>
  );
}

With Dark Grey Background

import React from 'react';

import { NavTab, NavTabs, magma } from 'react-magma-dom';

export function Example() {
  return (
    <NavTabs
      aria-label="Sample Inverse Colors Nav Tabs with Dark Background"
      backgroundColor={magma.colors.neutral800}
      isInverse
    >
      <NavTab isActive to="javascript:void(0)">
        First link
      </NavTab>
      <NavTab to="javascript:void(0)">Second link</NavTab>
      <NavTab to="javascript:void(0)">Third link</NavTab>
    </NavTabs>
  );
}

NavTabs Props

This component uses forwardRef. The ref is applied to the nav element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping nav element that gets rendered.

alignment

Description

Alignment of the tabs menu

Type

enum, one of:
TabsAlignment.center
TabsAlignment.left
TabsAlignment.right

Default

left

aria-label

Required

Description

The text the screen reader will announce that describes your navigation

Type

string

Default

backgroundColor

Description

Background color for the nav tabs menu

Type

string

Default

borderPosition

Description

Position of the current tab indicator border

Type

enum, one of:
TabsBorderPositionHorizontal.bottom
TabsBorderPositionHorizontal.top
TabsBorderPositionVertical.left

Default

bottom or left

iconPosition

Description

The orientation of icon on NavTab

Type

"left" | "top"

Default

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

textTransform

Description

Determines whether the tab appears in all-caps

Type

enum, one of:
TabsTextTransform.uppercase
TabsTextTransform.none

Default

TabsTextTransform.uppercase

NavTab Props

There are two variants of the NavTab component, one with the internal component being used and one with a component prop passed in as an override. The props of the NavTab component are slightly different depending on which variant is used.

This component uses forwardRef. The ref is applied to the a element.

All of the standard anchor attributes can be provided as props and will be applied to the a element that gets rendered.

NavTab With Internal Component

children

Description

The content of the component

Type

Element | string

Default

icon

Description

Icon to display within the component

Type

ReactElement |

Default

isActive

Description

If true, the component will display with the active/selected state

Type

boolean

Default

isFocused

Description

If true, sets a focus on the specified NavTab

Type

boolean

Default

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

orientation

Description

Determines if the tabs are displayed vertically or horizontally

Type

enum, one of:
TabsOrientation.horizontal
TabsOrientation.vertical

Default

TabsOrientation.horizontal

textTransform

Description

Determines whether the tab appears in all-caps

Type

enum, one of:
TabsTextTransform.none
TabsTextTransform.uppercase

Default

TabsTextTransform.uppercase

Required

Description

The href value of the tab link

Type

string

Default

NavTab With Passed in Component

component

Required

Description

The prop for custom component instead of `a` in NavTab.

Type

React.ReactNode

Default

icon

Description

Icon to display within the component

Type

ReactElement |

Default

iconPosition

Description

The orientation of icon on NavTab

Type

enum, one of:
TabsIconPosition.bottom
TabsIconPosition.left
TabsIconPosition.right
TabsIconPosition.top

Default

isActive

Description

If true, the component will display with the active/selected state

Type

boolean

Default

isFocused

Description

If true, sets a focus on the specified NavTab

Type

boolean

Default

isFullWidth

Description

If true, the tab will take up the full width of its container

Type

boolean

Default

false

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

orientation

Description

Determines if the tabs are displayed vertically or horizontally

Type

enum, one of:
TabsOrientation.horizontal
TabsOrientation.vertical

Default

TabsOrientation.horizontal

textTransform

Description

Determines whether the tab appears in all-caps

Type

enum, one of:
TabsTextTransform.none
TabsTextTransform.uppercase

Default

TabsTextTransform.uppercase

Type

string

Default

On this page

Design

Components

Patterns

Data Visualization

Nav Tabs

Basic Usage

Vertical Tabs

Custom Component

Border Position

Border Position (vertical)

Alignment

Text Transform

For all NavTabs

For a certain Tab

Text Transform

For all NavTabs

For a certain Tab

Full-Width

Scrollable

Scrollable Vertical Tabs

Icon Tabs

Icon Only

Icon with Text

Vertical with Icon

Icon Position

Inverse

With Blue Background

With Dark Grey Background

NavTabs Props

NavTab Props

NavTab With Internal Component

NavTab With Passed in Component