DXDashboardSidebar

A collapsible sidebar navigation component for Laravel dashboards with support for navigation groups, icons, badges, and active state highlighting.

Live Examples

Props

Name	Type	Required	Default	Description
`navigation`	`Navigation`	Yes	-	Navigation structure with groups and items. See Navigation type definition below
`currentUrl`	`string`	Yes	-	Current URL for determining active navigation items
`collapsed`	`boolean`	No	`false`	Whether the sidebar is collapsed
`title`	`string`	No	`Dashboard`	Sidebar title shown in the header

Events

Name	Parameters	Description
`toggle`	none	Emitted when the sidebar should toggle between collapsed and expanded states

Slots

Name	Description	Scoped Props
`brand`	Custom brand/logo content in the sidebar header. Receives collapsed (boolean) and title (string) as slot props	-
`link`	Custom navigation link rendering. Receives item (NavigationItem), isActive (boolean), and collapsed (boolean) as slot props	-

Extended Component

This is a custom component that extends beyond simple Bootstrap Vue Next wrappers, providing additional functionality specific to Laravel dashboards.

The Navigation type is an array of NavigationGroup objects:

interface NavigationItem {
  label: string;
  url: string;
  icon?: string;              // Icon component or emoji
  badge?: string | number;    // Badge content
  badgeColor?: string;        // Bootstrap colour variant
  active?: boolean;
  visible?: boolean;
}

interface NavigationGroup {
  label?: string;             // Group label (optional)
  items: NavigationItem[];
  collapsible?: boolean;
  collapsed?: boolean;
  visible?: boolean;
}

type Navigation = NavigationGroup[];

Features

Collapsible Design: Toggle between expanded and collapsed states
Navigation Groups: Organise navigation items into logical groups with labels
Active State: Automatically highlights active navigation items based on current URL
Icon Support: Display icons next to navigation items (works with component icons or emojis)
Badges: Show notification badges on navigation items
Sticky Positioning: Sidebar stays in view when scrolling
Custom Scrollbar: Styled scrollbar for better aesthetics
Flexible Rendering: Use slots to completely customise brand and link rendering