Bar Tabs

Bar Tabs provide navigation with an animated sliding indicator showing the selected tab. Available in horizontal and vertical orientations.

Horizontal Bar Tabs Playground

Preview

Code

Home

Explore

Library

Settings

Controls

Icons:

Bottom Line:

Badges:

Vertical Bar Tabs Playground

Preview

Code

Home

Explore

Library

Settings

Controls

Icons:

Left Line:

Badges:

Installation

You can add the bar tabs component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx @phosphor-icons/react @react-aria/focus

Copy and paste the following code into your project.

BarTab.tsx

HorizontalBarTabs.tsx

VerticalBarTabs.tsx

Badge.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { useState } from 'react';
import { HorizontalBarTabs } from '@versaui/ui/components/BarTab';
import { HouseIcon, CompassIcon, StackIcon } from '@phosphor-icons/react';
function Navigation() {
  const [selectedId, setSelectedId] = useState('home');
  const tabs = [
    { id: 'home', label: 'Home', icon: <HouseIcon size={20} /> },
    { id: 'explore', label: 'Explore', icon: <CompassIcon size={20} /> },
    { id: 'library', label: 'Library', icon: <StackIcon size={20} />, badge: 5 },
  ];
  return (
    <HorizontalBarTabs
      items={tabs}
      selectedId={selectedId}
      onChange={setSelectedId}
    />
  );
}

TabItem Interface

interface TabItem {
  id: string;        // Unique identifier
  label: string;     // Tab label
  icon?: ReactNode;  // Optional leading icon
  badge?: number;    // Optional badge count
  disabled?: boolean; // Disabled state
}

Accessibility

Uses role="tablist" and role="tab" with proper aria-selected and aria-disabled
Full keyboard navigation:
- ArrowLeft/Right for horizontal tabs
- ArrowUp/Down for vertical tabs
- Home/End to jump to first/last tab
Focus ring visible on keyboard navigation

BarTab Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Tab orientation.
`state`	`'default' \| 'hovered' \| 'selected' \| 'disabled'`	`'default'`	Visual state for demos.
`showIcon`	`boolean`	`true`	Show leading icon.
`leadingIcon`	`ReactNode`	`CirclesThree`	Custom leading icon.
`showBadge`	`boolean`	`false`	Show badge.
`badgeCount`	`number`	`0`	Badge count value.
`children`	`ReactNode`	`—`	Tab label.
`selected`	`boolean`	`—`	Controlled selected state.
`disabled`	`boolean`	`false`	Disabled state.
`hideBarIndicator`	`boolean`	`false`	Hide bar (when parent handles it).
`onClick`	`() => void`	`—`	Click handler.
`className`	`string`	`''`	Additional CSS classes.

HorizontalBarTabs Props

Prop	Type	Default	Description
`items`	`TabItem[]`	`—`	Array of tab items.
`selectedId`	`string`	`—`	Currently selected tab ID.
`onChange`	`(id: string) => void`	`—`	Selection change handler.
`showIcons`	`boolean`	`true`	Show icons if provided in items.
`showBottomLine`	`boolean`	`true`	Show bottom border line.
`className`	`string`	`''`	Additional CSS classes.

VerticalBarTabs Props

Prop	Type	Default	Description
`items`	`TabItem[]`	`—`	Array of tab items.
`selectedId`	`string`	`—`	Currently selected tab ID.
`onChange`	`(id: string) => void`	`—`	Selection change handler.
`showIcons`	`boolean`	`true`	Show icons if provided in items.
`showLeftLine`	`boolean`	`true`	Show left border line.
`width`	`string \| number`	`160`	Container width.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page