Nav Tabs

1.3.0

The NavTabs component represents the main navigation dock for an application on a mobile device, including up to 5 tabs or buttons for different sections. The component has a fixed position on the bottom of the screen.

Default

import React from "react";
import { NavTabs } from "@nimbus-ds/patterns";
import { HomeIcon, MenuIcon, MoneyIcon, TagIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const handleClick = () => {
    console.log("Tapped item");
  };

  return (
    <NavTabs>
      <NavTabs.Item
        active
        ariaLabel="Home"
        icon={<HomeIcon size="medium" />}
        onClick={handleClick}
      />
      <NavTabs.Item
        badge
        ariaLabel="Money"
        icon={<MoneyIcon size="medium" />}
        onClick={handleClick}
      />
      <NavTabs.Item
        ariaLabel="Tag"
        icon={<TagIcon size="medium" />}
        onClick={handleClick}
      />
      <NavTabs.Item
        ariaLabel="Menu"
        icon={<MenuIcon size="medium" />}
        onClick={handleClick}
      />
    </NavTabs>
  );
};

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/nav-tabs

Props

Additional props are passed to the <NavTabs> element. See div docs for a list of props accepted by the <NavTabs> element.

NavTabs

Name	Type	Default	Description
children*	React.ReactNode		Content to be rendered inside the Nav element.

NavTabs.Item

Name	Type	Description
icon*	React.ReactNode	Icon element to be rendered inside the button.
active	boolean	Controls whether the button is active or not.
badge	boolean	Displays a small badge on top of the button.
onClick*	onClick: () => void;	Function executed on click.
ariaLabel*	string	Text label used for accessibility.