Vuer UIKit | FortyFive Labs

The Navbar component provides a consistent navigation experience across your application. It includes built-in support for search, theme switching, and mobile responsiveness.

Props

Prop	Type	Default	Description
`title`	`string`	-	The title/logo text to display
`onSearch`	`(query: string) => void`	-	Callback function for search
`showThemeToggle`	`boolean`	`false`	Whether to show the theme toggle
`currentTheme`	`'light' \| 'dark' \| 'auto'`	-	Current theme state
`onThemeChange`	`(theme: string) => void`	-	Callback for theme changes

Overview

The Navbar is a top-level navigation component that typically contains the application logo, navigation links, search functionality, and user controls like theme switching.

Features

Responsive Design: Automatically adapts to mobile and desktop
Theme Switching: Built-in light/dark mode toggle
Search Integration: Optional search functionality
Customizable: Easy to customize with props

Basic Usage

import { Navbar } from '@vuer-ai/vuer-uikit';

function App() {
  return (
    <Navbar title="My Application" />
  );
}

With Search

import { Navbar } from '@vuer-ai/vuer-uikit';

function App() {
  const handleSearch = (query) => {
    console.log('Search query:', query);
  };

  return (
    <Navbar
      title="My Application"
      onSearch={handleSearch}
    />
  );
}

With Theme Toggle

import { Navbar } from '@vuer-ai/vuer-uikit';

function App() {
  return (
    <Navbar
      title="My Application"
      showThemeToggle={true}
    />
  );
}

API Reference

Examples

<Navbar title="My App" />

<Navbar
  title="My App"
  onSearch={(query) => {
    // Handle search
    console.log('Searching for:', query);
  }}
/>

<Navbar
  title="My App"
  showThemeToggle={true}
  currentTheme="light"
  onThemeChange={(theme) => {
    // Handle theme change
    console.log('Theme changed to:', theme);
  }}
/>

Mobile Behavior

On mobile devices, the navbar automatically adapts:

Search bar collapses into a mobile-friendly interface
Theme toggle remains accessible
Touch targets are appropriately sized
Responsive breakpoints ensure good UX

Customization

Styling

You can customize the navbar appearance using CSS custom properties:

.vuer-navbar {
  --navbar-bg: var(--neutral-50);
  --navbar-border: var(--neutral-200);
  --navbar-height: 4rem;
  --navbar-padding: 1rem;
}

Custom Content

For more complex navigation needs, you can extend the navbar with custom content:

<Navbar title="My App">
  <div className="custom-nav-content">
    <a href="/dashboard">Dashboard</a>
    <a href="/profile">Profile</a>
  </div>
</Navbar>

Accessibility

Proper semantic HTML structure
Keyboard navigation support
Screen reader announcements
Focus management
ARIA labels and descriptions

Best Practices

Keep the title concise and recognizable
Provide meaningful search functionality
Use theme toggle for better user experience
Ensure mobile responsiveness
Test with keyboard navigation

Navbar