165 lines
3.1 KiB
Markdown
165 lines
3.1 KiB
Markdown
- 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
|
|
|