TopNav

A responsive navigation header with brand, menu items, and actions.

Examples

Basic Usage

A simple navigation with brand, menu items, and actions.

Page content would appear here

Basic TopNav Example

import { TopNav } from '@creo-team/buzz-ui/server'
import { Button, ThemeSwitcher } from '@creo-team/buzz-ui/client'

export default function Example() {
	return (
		<TopNav
			brand="My App"
			items={[
				{ key: 'home', label: 'Home', href: '/', active: true },
				{ key: 'docs', label: 'Docs', href: '/docs' },
				{ key: 'components', label: 'Components', href: '/components' },
			]}
			right={
				<div className="flex items-center gap-2">
					<ThemeSwitcher />
					<Button variant="outline" size="sm">Sign In</Button>
				</div>
			}
		/>
	)
}

With Logo and Actions

Navigation with a logo component and multiple actions.

Page content would appear here

TopNav with Logo

<TopNav
	brand={
		<div className="flex items-center gap-2">
			<Logo className="h-8 w-8" />
			<span>My Company</span>
		</div>
	}
	items={[
		{ key: 'dashboard', label: 'Dashboard', href: '/dashboard', active: true },
		{ key: 'projects', label: 'Projects', href: '/projects' },
		{ key: 'team', label: 'Team', href: '/team' },
	]}
	right={
		<div className="flex items-center gap-2">
			<Button variant="outline" size="sm">Upgrade</Button>
			<Avatar src="/avatar.jpg" alt="User" />
		</div>
	}
/>

Minimal Version

A clean, minimal navigation with just essential elements.

Page content would appear here

API Reference

Prop	Type	Default	Description
`brand`	`React.ReactNode`	—	Brand logo or text to display
`items`	`TopNavItem[]`	`[]`	Navigation menu items
`right`	`React.ReactNode`	—	Content to display on the right side