Appearance
OVerticalAppBar Component
A customizable vertical app bar component that provides a side navigation panel with support for nested items, expandable sections, and various display options.
Overview
The OVerticalAppBar component provides:
- Vertical navigation panel with customizable width and height
- Support for nested navigation items with expandable sections
- Logo and title display with click handlers
- Multiple positioning options (left/right)
- Expandable/collapsible behavior
- Customizable styling and transitions
- Overlay backdrop support
When to Use
Use the OVerticalAppBar component when you need to:
- Create a side navigation panel for your application
- Display hierarchical navigation items
- Implement a collapsible sidebar
- Show application branding (logo and title)
- Create a responsive navigation system
Key Features
Positioning and Layout:
- Left or right side positioning
- Fixed width (20rem) with responsive behavior
- Floating or fixed positioning
- Sticky positioning option
- Elevation/shadow support
Navigation Features:
- Hierarchical navigation items
- Expandable/collapsible sections
- Active item highlighting
- Multi-level navigation support
- Icon support for navigation items
- Chevron indicators for expandable items
Header Section:
- Logo display with optional rounded style (supports SVG strings or image URLs)
- Title display
- Close button
- Fixed prepend height (4rem)
- Click handlers for logo and title
Display Options:
- Expand on hover
- Expand on click
- Persist icons when collapsed
- Overlay backdrop support
- Smooth transitions (0.3s)
Styling Customization:
- Fixed background color (#f2f2f2)
- Fixed title color (#111)
- Fixed logo and icon sizes (2.5rem)
- Elevation control
- Customizable via CSS classes and slots
Interactive Features:
- Item click handling
- Logo click handling
- Title click handling
- Close button handling
- Expand/collapse animations
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| elevation | Boolean | true | Whether to show elevation/shadow |
| floating | Boolean | true | Whether the app bar should float |
| sticky | Boolean | true | Whether the app bar should be sticky |
| logo | String | '' | URL or SVG string for the logo |
| roundedLogo | Boolean | false | Whether to show rounded logo |
| title | String | '' | Title text |
| showCloseButton | Boolean | true | Whether to show close button |
| modelValue | Boolean | true | Controls visibility of the app bar (v-model) |
| persistIconsOnHide | Boolean | true | Whether to show icons when collapsed |
| expandOnHover | Boolean | false | Whether to expand on hover |
| expandOnClick | Boolean | true | Whether to expand on click |
| overlay | Boolean | true | Whether to show overlay backdrop |
| position | String | 'left' | Position of the app bar ('left' or 'right') |
| items | Array | [] | Navigation items array |
| activeItem | String | '' | Currently active item (v-model) |
| showChevron | Boolean | true | Whether to show chevron icons |
| multiExpand | Boolean | true | Whether to allow multiple expanded sections |
Events
| Event | Payload | Description |
|---|---|---|
logoClick | - | Emitted when logo is clicked |
closeClick | - | Emitted when close button is clicked |
titleClick | - | Emitted when title is clicked |
update:modelValue | Boolean | Emitted when visibility changes (v-model) |
update:activeItem | String | Emitted when active item changes (v-model) |
Slots
| Slot | Description |
|---|---|
| default | Main content slot |
| prepend | Header section slot |
| logo | Logo slot with click handler |
| title | Title slot with click handler |
| closeBtn | Close button slot with click handler |
| content | Navigation items content slot |
| append | Footer section slot |