← Frontic UI
sidebar

Sidebar

Side panel on the start or end of the page, with groups, menus, badges and actions, that collapses off-screen or to icons and opens as a sheet on phones.

States: Default, Hover, Focus, Disabled

Parts

PartFileDoes
SidebarSidebar.vueHolds the side navigation panel, which can collapse to icons or hide off-screen.
SidebarContentSidebarContent.vueHolds the scrollable groups and menus between the sidebar header and footer.
SidebarFooterSidebarFooter.vueHolds the content pinned at the bottom of the sidebar.
SidebarGroupSidebarGroup.vueGroups a label with the related menu items in the sidebar.
SidebarGroupActionSidebarGroupAction.vueAdds a small action button next to a sidebar group's label.
SidebarGroupContentSidebarGroupContent.vueHolds the menu belonging to a sidebar group.
SidebarGroupLabelSidebarGroupLabel.vueLabels a group of sidebar items with a heading.
SidebarHeaderSidebarHeader.vueHolds the content pinned at the top of the sidebar, such as a search field.
SidebarInputSidebarInput.vueLets the user search or filter from within the sidebar.
SidebarInsetSidebarInset.vueHolds the main page content beside the sidebar.
SidebarMenuSidebarMenu.vueLists the navigation items of a sidebar group.
SidebarMenuActionSidebarMenuAction.vueAdds a secondary action button to a sidebar menu item.
SidebarMenuBadgeSidebarMenuBadge.vueShows a count or status beside a sidebar menu item.
SidebarMenuButtonSidebarMenuButton.vueLets the user open a sidebar menu item, with a tooltip when collapsed.
SidebarMenuItemSidebarMenuItem.vueGroups one navigation entry with its button, action and badge.
SidebarMenuSkeletonSidebarMenuSkeleton.vueShows a placeholder for a sidebar menu item while it loads.
SidebarMenuSubSidebarMenuSub.vueLists the nested items under a sidebar menu item.
SidebarMenuSubButtonSidebarMenuSubButton.vueLets the user open a nested sidebar menu item.
SidebarMenuSubItemSidebarMenuSubItem.vueGroups one nested entry of a sidebar submenu.
SidebarProviderSidebarProvider.vueGroups all parts of the sidebar and shares its open state with them.
SidebarRailSidebarRail.vueLets the user toggle the sidebar by clicking along its edge.
SidebarSeparatorSidebarSeparator.vueSeparates sections within the sidebar.
SidebarTriggerSidebarTrigger.vueLets the user expand and collapse the sidebar.

Anatomy

<SidebarProvider>
  <Sidebar>
    <SidebarHeader />
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel />
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton />
              <SidebarMenuBadge />
              <SidebarMenuSub>
                <SidebarMenuSubItem>
                  <SidebarMenuSubButton />
                </SidebarMenuSubItem>
              </SidebarMenuSub>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
        <SidebarGroupAction />
      </SidebarGroup>
      <SidebarSeparator />
    </SidebarContent>
    <SidebarFooter />
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>

Styling

PartRecipe
Sidebarsidebar
Sidebarsidebar-size
Sidebarsidebar-container
SidebarContentsidebar-content
SidebarFootersidebar-footer
SidebarGroupsidebar-group
SidebarGroupActionsidebar-action
SidebarGroupContentsidebar-group-content
SidebarGroupLabelsidebar-group-label
SidebarHeadersidebar-header
SidebarInputsidebar-input
SidebarInsetsidebar-inset
SidebarMenusidebar-menu
SidebarMenuActionsidebar-action
SidebarMenuBadgesidebar-menu-badge
SidebarMenuButtonsidebar-menu-button
SidebarMenuSkeletonsidebar-menu-skeleton
SidebarMenuSubsidebar-menu-sub
SidebarMenuSubButtonsidebar-menu-sub-button
SidebarProvidersidebar-wrapper
SidebarRailsidebar-rail
SidebarRailsidebar-rail-line
SidebarSeparatorsidebar-separator

Install

Writes 26 files into components/ui/sidebar/. For agents, npx @frontic/ui docs sidebar prints this reference as markdown; the MCP server serves the same.

Installs with it
button
input
separator
sheet
skeleton
tooltip
npm packages
@lucide/vue
@vueuse/core
class-variance-authority
reka-ui

Built from

ButtonInputSeparatorSheetSkeletonTooltip

API reference

SidebarContent SidebarContent.vue

SidebarFooter SidebarFooter.vue

SidebarGroup SidebarGroup.vue

SidebarGroupAction SidebarGroupAction.vue

SidebarGroupContent SidebarGroupContent.vue

SidebarGroupLabel SidebarGroupLabel.vue

SidebarHeader SidebarHeader.vue

SidebarInput SidebarInput.vue

SidebarInset SidebarInset.vue

SidebarMenu SidebarMenu.vue

SidebarMenuAction SidebarMenuAction.vue

SidebarMenuBadge SidebarMenuBadge.vue

SidebarMenuButton SidebarMenuButton.vue

SidebarMenuItem SidebarMenuItem.vue

SidebarMenuSkeleton SidebarMenuSkeleton.vue

SidebarMenuSub SidebarMenuSub.vue

SidebarMenuSubButton SidebarMenuSubButton.vue

SidebarMenuSubItem SidebarMenuSubItem.vue

SidebarProvider SidebarProvider.vue

SidebarRail SidebarRail.vue

SidebarSeparator SidebarSeparator.vue

SidebarTrigger SidebarTrigger.vue

Example
State