Top Navigation

TopNavigation provides a consistent header for app navigation, search, and user profile management.

Top Navigation Playground

Preview

Code

Overview

Controls

Type:

Default

Title Only

Search Type:

Search Bar

Search Icon

Back Button:

Installation

You can add the top navigation component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

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

Copy and paste the following code into your project.

TopNavigation.tsx

Logo.tsx

HorizontalContainerTabs.tsx

ContainerTab.tsx

CompactButton.tsx

SearchBar.tsx

Avatar.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 { TopNavigation } from '@versaui/ui/components/TopNavigation';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'projects', label: 'Projects' },
  { id: 'analytics', label: 'Analytics' },
];

<TopNavigation
  tabs={tabs}
  selectedTabId="overview"
  onTabChange={(id) => setCurrentTab(id)}
/>

Types

Default

Navigation with tabs and full layout:

<TopNavigation type="default" tabs={tabs} />

Title

Simplified header with page title instead of tabs:

<TopNavigation type="title" pageTitle="Dashboard" />

Search Types

Search Bar

Full search bar displayed in the header:

<TopNavigation searchType="bar" />

Search Icon

Compact search icon button:

<TopNavigation searchType="icon" />

Custom Slots

Customize left, center, and right sections:

<TopNavigation
  leftSlot={<Logo />}
  centerSlot={<SearchBar />}
  rightSlot={<UserMenu />}
/>

Notifications

Pass notification data to display a notification panel:

<TopNavigation
  notifications={[
    {
      id: '1',
      title: 'New comment',
      description: 'Sarah mentioned you',
      timestamp: '2 min ago',
      unread: true,
      leadingItem: 'icon',
    },
  ]}
  onNotificationClick={(id) => markAsRead(id)}
  onMarkAllAsRead={() => markAll()}
/>

Accessibility

Uses <header> with proper semantic structure
Navigation tabs are keyboard accessible
Search bar supports ⌘K / Ctrl K shortcut
User profile menu is keyboard navigable
Notifications panel supports Tab navigation

TopNavigation Props

Prop	Type	Default	Description
`type`	`'default' \| 'title'`	`'default'`	Layout type.
`searchType`	`'bar' \| 'icon'`	`'bar'`	Search display style.
`pageTitle`	`string`	`'Page Title'`	Page title text.
`tabs`	`ContainerTabItem[]`	`—`	Navigation tab items.
`selectedTabId`	`string`	`—`	Active tab ID.
`onTabChange`	`(id: string) => void`	`—`	Tab change handler.
`userName`	`string`	`'Adam'`	User display name.
`userEmail`	`string`	`—`	User email address.
`userPerson`	`AvatarPerson`	`—`	Avatar person identifier.
`notifications`	`NotificationData[]`	`[]`	Notification items.
`onNotificationClick`	`(id: string) => void`	`—`	Notification click handler.
`onMarkAllAsRead`	`() => void`	`—`	Mark all notifications read.
`onViewAll`	`() => void`	`—`	View all notifications.
`showUpgradeButton`	`boolean`	`true`	Show upgrade CTA.
`onSearchClick`	`() => void`	`—`	Search click handler.
`width`	`number \| string`	`'100%'`	Container width.
`leftSlot`	`ReactNode`	`—`	Custom left content.
`centerSlot`	`ReactNode`	`—`	Custom center content.
`rightSlot`	`ReactNode`	`—`	Custom right content.

Overview

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