TabNav

A tab‑style navigation bar that mimics browser tabs. It shows horizontal tabs for page navigation, optional utility items, an authentication button, and a cart icon. Brand text appears on the left, tabs in the center, and utilities on the right, making it suitable for admin dashboards, SaaS apps, and internal tools.

Use Cases

• Admin dashboards with multiple management pages (Users, Products, Orders, Settings)
• SaaS applications with feature tabs (Dashboard, Analytics, Reports, Settings)
• Internal tools with section‑based navigation
• Data management apps with entity tabs (Companies, Metrics, Expenses)
• CRM/ERP style apps with tabbed navigation

Properties

brandText

Brand/company name displayed on the left side of the nav bar. Type: string.

Tip: Use company/product name for brand identity. Keep to 1‑3 words.

variant

Visual style variant controlling color scheme. Type: string. Options: light, dark, glass. Default: light.

Tip: Use ‘light’ for clean, traditional design; ‘dark’ for bold, high‑contrast aesthetics; ‘glass’ for modern, premium look.

items

Main tab navigation items. Each tab navigates to a page via targetPage. Type: array. Minimum items: 2. Maximum items: 10.

Tip: 4‑8 tabs ideal; 2‑3 minimum, 10 maximum. Keep labels 1‑2 words (10 characters max). Add icons for visual recognition. Add visibleToRoles: [{ "role": "admin" }] on admin‑only tabs so regular users only see public tabs.

Item object properties

• label – Tab label text. Type: string. (required)
• icon – Lucide icon name (e.g., ‘LayoutDashboard’, ‘Users’, ‘Settings’). Type: string.
• href – Link destination (URL or #anchor). Use targetPage for page navigation instead. Type: string.
• targetPage – Target page slug for multi‑page navigation (e.g., ‘home’, ‘admin-users’, ‘settings’). Type: string.
• visibleToRoles – Array of role objects. If set, only users with a matching role see this tab. If empty/omitted, visible to all. Type: array of objects with property role (string).

activeStyle

Visual style for the active tab indicator. Type: string. Options: raised, underline, highlighted. Default: raised.

Tip: raised – browser‑tab style, best for dashboards; underline – clean line under active tab, modern; highlighted – bold background highlight, high contrast.

showUtilities

Whether to show utility items on the right side. Type: boolean. Default: false.

utilityItems

Utility/secondary items on the right side (Help, Notifications, Profile, etc.). Type: array.

Utility item object properties

• label – Utility item label. Type: string. (required)
• icon – Lucide icon name. Type: string.
• href – Link destination. Type: string.
• targetPage – Target page slug. Type: string.
• visibleToRoles – Role‑based visibility for this utility item. Type: array of objects with property role (string).

showAuthButton

Show login/logout button on far right. Required for apps with authentication. Type: boolean. Default: false.

loginButtonText

Text for the login button. Type: string. Default: Sign In.

showCartIcon

Show shopping cart icon with badge count (for e‑commerce). Type: boolean. Default: false.

cartTargetPage

Target page slug for cart icon click. Defaults to ‘shop’. Type: string.

stickyTop

Whether navbar stays fixed at top during scrolling. Type: boolean. Default: true.

customCss

Custom CSS styles for advanced customization. Type: string.

Best Practices

• Use items array for main tab navigation (NOT tabs).
• Limit to 4‑8 tabs for clarity (more = crowded).
• Keep tab labels short (1‑2 words).
• Add Lucide icons to tabs for visual recognition.
• Use visibleToRoles on admin‑only tabs to hide them from regular users.
• Set brandText for brand identity on the left.
• Choose activeStyle based on design aesthetic: ‘raised’ (browser tabs), ‘underline’ (modern), ‘highlighted’ (bold).
• Enable showAuthButton if app has authentication.
• Use utilityItems for secondary actions (Help, Notifications, Profile).