UI

TabNavigation

Navigation menu with links styled as tabs.

Installation

  1. 1

    Install dependencies:

    npm install @radix-ui/react-navigation-menu
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor TabNavigation [v0.1.0]
    import React from "react"import * as NavigationMenuPrimitives from "@radix-ui/react-navigation-menu"
    import { cx, focusRing } from "@/lib/utils"
    function getSubtree(  options: { asChild: boolean | undefined; children: React.ReactNode },  content: React.ReactNode | ((children: React.ReactNode) => React.ReactNode),) {  const { asChild, children } = options  if (!asChild)    return typeof content === "function" ? content(children) : content
      const firstChild = React.Children.only(children) as React.ReactElement  return React.cloneElement(firstChild, {    children:      typeof content === "function"        ? content(firstChild.props.children)        : content,  })}
    const TabNavigation = React.forwardRef<  React.ElementRef<typeof NavigationMenuPrimitives.Root>,  Omit<    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitives.Root>,    "orientation" | "defaultValue" | "dir"  >>(({ className, children, ...props }, forwardedRef) => (  <NavigationMenuPrimitives.Root    ref={forwardedRef}    {...props}    tremor-id="tremor-raw"    asChild={false}  >    <NavigationMenuPrimitives.List      className={cx(        // base        "flex items-center justify-start whitespace-nowrap border-b [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",        // border color        "border-gray-200 dark:border-gray-800",        className,      )}    >      {children}    </NavigationMenuPrimitives.List>  </NavigationMenuPrimitives.Root>))
    TabNavigation.displayName = "TabNavigation"
    const TabNavigationLink = React.forwardRef<  React.ElementRef<typeof NavigationMenuPrimitives.Link>,  Omit<    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitives.Link>,    "onSelect"  > & { disabled?: boolean }>(({ asChild, disabled, className, children, ...props }, forwardedRef) => (  <NavigationMenuPrimitives.Item className="flex" aria-disabled={disabled}>    <NavigationMenuPrimitives.Link      aria-disabled={disabled}      className={cx(        "group relative flex shrink-0 select-none items-center justify-center",        disabled ? "pointer-events-none" : "",      )}      ref={forwardedRef}      onSelect={() => {}}      asChild={asChild}      {...props}    >      {getSubtree({ asChild, children }, (children) => (        <span          className={cx(            // base            "-mb-px flex items-center justify-center whitespace-nowrap border-b-2 border-transparent px-3 pb-2 text-sm font-medium transition-all",            // text color            "text-gray-500 dark:text-gray-500",            // hover            "group-hover:text-gray-700 group-hover:dark:text-gray-400",            // border hover            "group-hover:border-gray-300 group-hover:dark:border-gray-400",            // selected            "group-data-[active]:border-blue-500 group-data-[active]:text-blue-500",            "group-data-[active]:dark:border-blue-500 group-data-[active]:dark:text-blue-500",            // disabled            disabled              ? "pointer-events-none text-gray-300 dark:text-gray-700"              : "",            focusRing,            className,          )}        >          {children}        </span>      ))}    </NavigationMenuPrimitives.Link>  </NavigationMenuPrimitives.Item>))
    TabNavigationLink.displayName = "TabNavigationLink"
    export { TabNavigation, TabNavigationLink }
    

Example: With icons

Example: Custom Routing

<TabNavigation>  <TabNavigationItem asChild active={pathname === "/home"}>    <Link href="/home">Home</Link>  </TabNavigationItem>  <TabNavigationItem asChild active={pathname === "/balances"}>    <Link href="/balances">Balances</Link>  </TabNavigationItem></TabNavigation>

API Reference: Tabs

This component uses the Radix UI API.

Note: The orientation, defaultValue,dir, and onSelect props have been removed.

API Reference: TabNavigation

This component uses the Radix UI API.

API Reference: TabNavigationItem

This component uses the Radix UI API.

href
Required
string
Set link.
disabled
boolean
Set link to be disabled.
active
boolean
Set active styling of link.