@askrjs/themes/sidebar

Sidebartype

Sidebar: (props: SidebarProps) => JSX.Element

Root <aside> sidebar layout with configurable width, side, collapse behavior, and visual variant, exposed as data attributes for CSS.

SidebarButtonPropstype

SidebarButtonProps: JSX.IntrinsicElements["button"] & {
  active?: boolean;
  asChild?: boolean;
  size?: "default" | "sm" | "lg";
  tooltip?: string;
  tooltipSide?: SidebarTooltipSide;
  variant?: "default" | "outline";
}

Props shared by the interactive {@link Sidebar } button parts (menu button, action, trigger).

active

active?: boolean | undefined;

asChild

asChild?: boolean | undefined;

size

size?: "default" | "sm" | "lg" | undefined;

tooltip

tooltip?: string | undefined;

tooltipSide

tooltipSide?: SidebarTooltipSide | undefined;

variant

variant?: "default" | "outline" | undefined;

SidebarCollapsibletype

SidebarCollapsible: "offcanvas" | "icon" | "none"

How a {@link Sidebar } collapses: fully off-canvas, down to icons only, or not at all.

SidebarContenttype

SidebarContent: (props: SidebarPartProps) => JSX.Element

Renders the scrollable content region of a {@link Sidebar}.

SidebarFootertype

SidebarFooter: (props: SidebarPartProps) => JSX.Element

Renders the footer region of a {@link Sidebar}.

SidebarGrouptype

SidebarGroup: (props: SidebarPartProps) => JSX.Element

Groups related {@link SidebarMenu} items together.

SidebarGroupContenttype

SidebarGroupContent: (props: SidebarPartProps) => JSX.Element

Renders the content region of a {@link SidebarGroup}.

SidebarGroupLabeltype

SidebarGroupLabel: (props: SidebarPartProps) => JSX.Element

Renders the label for a {@link SidebarGroup}.

SidebarHeadertype

SidebarHeader: (props: SidebarPartProps) => JSX.Element

Renders the header region of a {@link Sidebar}.

SidebarInsettype

SidebarInset: (props: SidebarPartProps) => JSX.Element

Renders the <main> content area beside the {@link Sidebar}.

SidebarMenutype

SidebarMenu: (props: SidebarPartProps) => JSX.Element

Renders a <ul> list of {@link SidebarMenuItem}s.

SidebarMenuActiontype

SidebarMenuAction: (props: SidebarButtonProps) => JSX.Element

Renders a secondary action button attached to a {@link SidebarMenuItem}, with an optional tooltip.

SidebarMenuBadgetype

SidebarMenuBadge: (props: SidebarPartProps) => JSX.Element

Renders a status badge attached to a {@link SidebarMenuItem}.

SidebarMenuButtontype

SidebarMenuButton: (props: SidebarButtonProps) => JSX.Element

Clickable menu button within a {@link SidebarMenuItem}; supports active/size/variant state and an optional tooltip.

SidebarMenuItemtype

SidebarMenuItem: (props: SidebarPartProps) => JSX.Element

Renders a single <li> entry within a {@link SidebarMenu}.

SidebarPartPropstype

SidebarPartProps: JSX.IntrinsicElements["div"] & {
  as?: keyof JSX.IntrinsicElements;
  asChild?: boolean;
}

Props shared by the generic {@link Sidebar } structural parts (content, header, footer, group, etc.).

as

as?: keyof JSX.IntrinsicElements | undefined;

asChild

asChild?: boolean | undefined;

SidebarPropstype

SidebarProps: Omit<BlockElementProps<"aside">, "as" | "width" | "shrink"> & {
  collapsible?: SidebarCollapsible;
  side?: SidebarSide;
  variant?: SidebarVariant;
  width?: BlockElementProps<"aside">["width"];
  shrink?: BlockElementProps<"aside">["shrink"];
}

Props for the {@link Sidebar } component.

collapsible

collapsible?: SidebarCollapsible | undefined;

shrink

shrink?: ResponsiveValue<number | boolean> | undefined;

side

side?: SidebarSide | undefined;

variant

variant?: SidebarVariant | undefined;

width

width?: ResponsiveValue<BlockSize> | undefined;

SidebarRailtype

SidebarRail: (props: SidebarButtonProps) => JSX.Element

Renders a draggable/clickable rail along the sidebar's edge for resizing or toggling it.

SidebarRailPropstype

SidebarRailProps: SidebarButtonProps

Props for the {@link SidebarRail } component.

active

active?: boolean | undefined;

asChild

asChild?: boolean | undefined;

size

size?: "default" | "sm" | "lg" | undefined;

tooltip

tooltip?: string | undefined;

tooltipSide

tooltipSide?: SidebarTooltipSide | undefined;

variant

variant?: "default" | "outline" | undefined;

SidebarScopetype

SidebarScope: (props: SidebarPartProps) => JSX.Element

Scoping wrapper that establishes the sidebar's CSS/context boundary.

SidebarSidetype

SidebarSide: "left" | "right"

Which edge of the viewport a {@link Sidebar } is docked to.

SidebarTooltipSidetype

SidebarTooltipSide: "top" | "bottom" | "left" | "right"

Side a sidebar button's tooltip is positioned on.

SidebarTriggertype

SidebarTrigger: (props: SidebarButtonProps) => JSX.Element

Icon button that toggles the {@link Sidebar}'s open/collapsed state, with an optional tooltip.

SidebarVarianttype

SidebarVariant: "sidebar" | "floating" | "inset"

Visual style of a {@link Sidebar }.