Appearance
HorizontalAppBar Component
A flexible and customizable horizontal app bar component that provides a consistent navigation experience across your application.
Overview
The HorizontalAppBar component provides:
- Flexible positioning options (fixed, sticky, absolute, relative, static)
- Customizable logo and title display
- Three-section layout (left, center, right) with customizable content
- Responsive design that adapts to different screen sizes
- Elevation and color customization
- Accessible design with proper ARIA attributes
When to Use
Use the HorizontalAppBar component when you need to:
- Create a main navigation bar for your application
- Display a consistent header across different pages
- Show application branding (logo and title)
- Provide navigation controls and user actions
- Create a sticky or fixed header that stays visible while scrolling
Key Features
- Flexible Positioning: Choose from multiple positioning options (fixed, sticky, absolute, relative, static)
- Customizable Appearance: Set custom colors, height, and elevation
- Logo Support: Display a logo with optional rounded styling
- Title Display: Show application title with text truncation for long titles
- Three-Section Layout: Organize content in left, center, and right sections
- Custom Slots: Use slots to customize each section's content
- Responsive Design: Adapts to different screen sizes
- Hover Effects: Subtle animations for logo and title
- Accessibility: Proper ARIA attributes and semantic HTML