Navbar

Name: Aki UI
Author: Duy (DuyDev)

A responsive navigation bar component with brand, items, and mobile toggle functionality.

Import

import { Navbar } from '@akitectio/aki-ui'

Basic Usage

<Navbar>
  <Navbar.Brand href="#">
    <div className="flex items-center space-x-2">
      <svg className="h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
      </svg>
      <span className="font-bold text-xl">Aki UI</span>
    </div>
  </Navbar.Brand>
  <Navbar.Item href="#" active>Home</Navbar.Item>
  <Navbar.Item href="#">Features</Navbar.Item>
  <Navbar.Item href="#">Pricing</Navbar.Item>
  <Navbar.Item href="#">About</Navbar.Item>
</Navbar>

Variants

Primary

<Navbar variant="primary">
  <Navbar.Brand href="#">
    <span className="font-bold text-xl">Aki UI</span>
  </Navbar.Brand>
  <Navbar.Item href="#" active>Home</Navbar.Item>
  <Navbar.Item href="#">Products</Navbar.Item>
  <Navbar.Item href="#">Services</Navbar.Item>
</Navbar>

Dark

<Navbar variant="dark">
  <Navbar.Brand href="#">
    <span className="font-bold text-xl">Aki UI</span>
  </Navbar.Brand>
  <Navbar.Item href="#" active>Dashboard</Navbar.Item>
  <Navbar.Item href="#">Analytics</Navbar.Item>
  <Navbar.Item href="#">Settings</Navbar.Item>
</Navbar>

Positioning

The Navbar component supports various positioning options:

// Static (default)
<Navbar position="static">
  {/* Navbar content */}
</Navbar>

// Fixed to top
<Navbar position="fixed-top">
  {/* Navbar content */}
</Navbar>

// Fixed to bottom
<Navbar position="fixed-bottom">
  {/* Navbar content */}
</Navbar>

// Sticky top
<Navbar position="sticky-top">
  {/* Navbar content */}
</Navbar>

API Reference

Navbar Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'light' \| 'dark' \| 'transparent'	'light'	Visual style variant of the navbar
position	'static' \| 'fixed-top' \| 'fixed-bottom' \| 'sticky-top'	'static'	Positioning behavior of the navbar
expand	boolean \| 'sm' \| 'md' \| 'lg' \| 'xl'	true	When to expand on larger screens
toggleable	boolean	true	Whether to include a toggle button for mobile
toggleContent	React.ReactNode	-	Custom toggle button content
onToggle	() => void	-	Callback when toggle button is clicked

Navbar.Brand Props

Prop	Type	Default	Description
children	React.ReactNode	-	Brand content (logo, text, or custom element)
href	string	-	URL to navigate to when brand is clicked
onClick	(event: MouseEvent) => void	-	Custom click handler for brand

Navbar.Item Props

Prop	Type	Default	Description
children	React.ReactNode	-	Item content
href	string	-	URL to navigate to
active	boolean	false	Whether the item is active/current
disabled	boolean	false	Whether the item is disabled
onClick	(event: MouseEvent) => void	-	Custom click handler

Accessibility

✅ Full keyboard navigation support
✅ ARIA attributes for mobile toggle
✅ Escape key closes mobile menu
✅ Screen reader compatible
✅ Focus management for navigation items