- Home
- Components
- Navbar

# Navbar

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

#### Basic Navbar

```
<Navbar title="My App" />
```

#### Navbar with Search

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

#### Navbar with Theme Toggle

```
<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