Tab Navigation

Tab Navigation is a section content template that provides a horizontal tab list with a clear active indicator, content switching, optional icons (with positions: left, right, top), optional badges (with or without counter, and shapes: pill, circle, square), and custom active/inactive colors. It supports full keyboard navigation (Arrow Left/Right, Enter/Space, Home/End) and is built for minimal re-renders using callbacks and stable refs.

Features:

• Horizontal tab list with underline or pill active indicator
• Tab content switching
• Optional icons with positions: left, right, top
• Optional badges: counter or label, shapes pill / circle / square
• Custom active and inactive colors via class names
• Keyboard support: Arrow keys, Enter, Space, Home, End

---

Show IconsShow Badges

Preview

Overview

This is the overview content. Tabs switch content when you click or use the keyboard. Use Arrow Left/Right to move between tabs and Enter or Space to activate.

Code

const tabs = [
  {
    id: 'overview',
    label: 'Overview',
    icon: FileText,
    iconPosition: 'left',
    content: <div>Overview content...</div>,
  },
  { id: 'analytics', label: 'Analytics', content: <div>Analytics...</div> },
  { id: 'settings', label: 'Settings', content: <div>Settings...</div> },
];
import TabNavigation from '@ignix-ui/tabnavigation';
<TabNavigation
  tabs={tabs}
  indicatorVariant="underline"
  defaultActiveId="overview"
/>

---

Installation

CLI

ignix add component tab-navigation

Manual

Install the template and use the same API as in the demo. Import from your design system or copy the component from apps/docs/src/components/UI/tab-navigation.

---

Usage

Import the component and define tabs with id, label, content, and optional icon, iconPosition, and badge:

import TabNavigation from '@ignix-ui/tabnavigation';
import { FileText, Settings } from 'lucide-react';

const tabs = [
  {
    id: 'overview',
    label: 'Overview',
    icon: FileText,
    iconPosition: 'left',
    badge: { count: 3, shape: 'pill' },
    content: <div>Overview content...</div>,
  },
  {
    id: 'settings',
    label: 'Settings',
    icon: Settings,
    iconPosition: 'right',
    content: <div>Settings content...</div>,
  },
];

function MyTabs() {
  return (
    <TabNavigation
      tabs={tabs}
      indicatorVariant="underline"
      defaultActiveId="overview"
      onChange={(activeId) => console.log(activeId)}
    />
  );
}

Controlled mode

const [activeId, setActiveId] = useState('overview');

<TabNavigation
  tabs={tabs}
  activeId={activeId}
  onChange={setActiveId}
  indicatorVariant="pill"
/>

Custom colors

<TabNavigation
  tabs={tabs}
  activeTabClassName="text-emerald-600"
  inactiveTabClassName="text-slate-500 hover:text-slate-700"
  activeIndicatorClassName="bg-emerald-600"
/>

---

Props

TabNavigation

Prop	Type	Default	Description
tabs	TabItem[]	required	Array of tab definitions (id, label, content, optional icon, iconPosition, badge).
defaultActiveId	string	first tab id	Initial active tab id (uncontrolled).
activeId	string	-	Controlled active tab id.
onChange	(activeId: string) => void	-	Callback when the active tab changes.
className	string	-	Root container class.
tabListClassName	string	-	Horizontal tab list class.
panelClassName	string	-	Content panel class.
indicatorVariant	'underline' | 'pill'	'underline'	Style of the active indicator.
activeTabClassName	string	-	Class for active tab (e.g. text/background color).
inactiveTabClassName	string	-	Class for inactive tabs.
activeIndicatorClassName	string	-	Class for the underline indicator bar.

TabItem

Prop	Type	Description
id	string	required – Unique tab id.
label	string	required – Tab label.
content	React.ReactNode	required – Panel content when active.
icon	LucideIcon	Optional icon component.
iconPosition	'left' | 'right' | 'top'	Icon position (default 'left').
badge	{ label?: string; count?: number; showZero?: boolean; shape?: 'pill' | 'circle' | 'square' }	Optional badge (counter or label, shape).

Keyboard: Arrow Left/Right (or Up/Down) move focus and active tab; Enter or Space activate; Home/End go to first/last tab.