# Sidebar Use a sidebar navigation layout to keep your application content front and center. ```blade @fluxAppearance Home Inbox Documents Calendar Marketing site Android app Brand guidelines Settings Help Olivia Martin Truly Delta Logout Olivia Martin Truly Delta Logout Good afternoon, Olivia Here's what's new today @fluxScripts ``` ## Secondary header Use a top header for secondary navigation. ```blade @fluxAppearance Home Inbox Documents Calendar Marketing site Android app Brand guidelines Settings Help Olivia Martin Truly Delta Logout Olivia Martin Truly Delta Logout Dashboard Orders Catalog Configuration Good afternoon, Olivia Here's what's new today @fluxScripts ``` ## Collapsible sidebar Make your app feel more spacious with a collapsible sidebar. ```blade @fluxAppearance Home Inbox Documents Calendar Marketing site Android app Brand guidelines Settings Help Olivia Martin Truly Delta Logout Olivia Martin Truly Delta Logout Good afternoon, Olivia Here's what's new today @fluxScripts ``` ## Related - [Header](https://fluxui.dev/layouts/header) - Create top navigation headers for your application - [Brand](https://fluxui.dev/components/brand) - Display your company logo and name consistently - [Navlist](https://fluxui.dev/components/navbar#navlist-(sidebar)) - Build vertical navigation lists with nested groups - [Profile](https://fluxui.dev/components/profile) - Show user avatars and profile information ## Reference ### flux:sidebar **Prop:** - `sticky` - When present, makes the sidebar sticky when scrolling. - `collapsible` - Controls sidebar collapse behavior. Values: `"mobile"` (mobile-only), `true` (both mobile and desktop), `false` (never collapsible). - `breakpoint` - The viewport breakpoint for mobile/desktop behavior. Accepts pixel values (`1024`, `"1024px"`) or rem values (`"64rem"`). Defaults to `1024`. When using responsive classes like `lg:hidden`, ensure they align with your custom breakpoint to avoid drift. For precision, use data attribute selectors like `lg:hidden` which automatically respect the configured breakpoint. - `stashable` - Deprecated. Use `collapsible="mobile"` instead. When present, allows the sidebar to be toggled on/off on smaller screens. - `persist` - Controls whether the collapsed state is saved to localStorage. Defaults to `true` (desktop collapsed state persists across sessions). Set to `false` to disable persistence. **Slot:** - `default` - Content to display within the sidebar, typically including header, navigation, and footer sections. **CSS:** - `class` - Additional CSS classes applied to the sidebar. Common uses: `bg-zinc-50`, `border-r`, etc. ### flux:sidebar.header **Slot:** - `default` - Content for the sidebar header, typically containing brand and collapse button. **CSS:** - `class` - Additional CSS classes applied to the header container. ### flux:sidebar.brand **Prop:** - `href` - The URL to navigate to when the brand is clicked. - `logo` - The URL or path to the logo image. - `logo:dark` - The URL or path to the logo image for dark mode. - `name` - The brand name to display next to the logo. **CSS:** - `class` - Additional CSS classes applied to the brand link. ### flux:sidebar.collapse **Prop:** - `inset` - Positioning of the collapse button. Space-separated values like `"left"`, `"right"`, `"top"`, `"bottom"`, or combinations like `"left top bottom"`. - `tooltip` - Tooltip text shown on hover. Defaults to `"Toggle sidebar"`. **CSS:** - `class` - Additional CSS classes applied to the collapse button. ### flux:sidebar.search **Prop:** - `placeholder` - Placeholder text for the search input. **CSS:** - `class` - Additional CSS classes applied to the search container. ### flux:sidebar.nav **Slot:** - `default` - Navigation items and groups to display. **CSS:** - `class` - Additional CSS classes applied to the navigation container. ### flux:sidebar.item **Prop:** - `href` - The URL to navigate to when the item is clicked. - `icon` - The icon to display before the item text. - `badge` - A badge value to display on the right side of the item. - `current` - When present, indicates this is the currently active item. - `tooltip` - Tooltip text shown when sidebar is collapsed. Defaults to the item's text content. **Slot:** - `default` - The text content of the navigation item. **CSS:** - `class` - Additional CSS classes applied to the item link. ### flux:sidebar.group **Prop:** - `heading` - The heading text for the group. - `expandable` - When present, allows the group to be expanded/collapsed. - `icon` - The icon to display before the group heading instead of the default chevron icon. Groups without an icon specified will be hidden when the sidebar is collapsed. - `expanded` - Controls the initial expanded state. Defaults to `true`. **Slot:** - `default` - The navigation items within this group. **CSS:** - `class` - Additional CSS classes applied to the group container. ### flux:sidebar.spacer **CSS:** - `class` - Additional CSS classes applied to the spacer element. ### flux:sidebar.profile **Prop:** - `avatar` - The URL or path to the user's avatar image. - `name` - The user's display name. **CSS:** - `class` - Additional CSS classes applied to the profile container. ### flux:sidebar.toggle **Prop:** - `icon` - The icon to display in the toggle button (e.g., `bars-2`, `x-mark`). - `inset` - Positioning of the toggle button (e.g., `left`). **CSS:** - `class` - Additional CSS classes applied to the toggle button. Common uses: `lg:hidden` to show only on mobile. ### flux:main **Prop:** - `container` - When present, constrains the main content to a container width. **Slot:** - `default` - Content to display within the main content area.