A responsive top navigation bar component for Laravel dashboards with user menu, search functionality, and sidebar toggle.
| Name Click to sort ascending | Type | Required Click to sort ascending | Default | Description |
|---|
user | { name: string; email: string; [key: string]: any } | null | No | null | Current user object with name and email |
pageTitle | string | No | Dashboard | Page title displayed in the navbar |
| Name Click to sort ascending | Parameters | Description |
|---|
toggle-sidebar | none | Emitted when the hamburger menu is clicked to toggle the sidebar |
| Name Click to sort ascending | Description | Scoped Props |
|---|
menu-icon | Custom hamburger menu icon (default: three horizontal lines SVG) | - |
search | Search input or component for the centre of the navbar | - |
user-menu | Complete custom user menu (replaces default dropdown). Receives user as slot prop | - |
user-icon | Custom user avatar/icon. Receives initial (first letter of name) as slot prop | - |
user-menu-items | Custom dropdown menu items for the user dropdown. Receives user as slot prop | - |
This is a custom component that extends beyond simple Bootstrap Vue Next wrappers,
providing additional functionality specific to Laravel dashboards.
- Responsive Design: Adapts to different screen sizes with mobile-friendly layout
- User Avatar: Automatically generates avatar with user initials
- Flexible Search: Customisable search slot for your search implementation
- Sticky Positioning: Stays at the top of the page when scrolling
- Customisable Slots: Multiple slots for complete customisation of layout and functionality