# @askrjs/themes/sidebar

> Published API exports for @askrjs/themes/sidebar.

Source: [https://askrjs.com/docs/reference/api/themes/sidebar](https://askrjs.com/docs/reference/api/themes/sidebar)

Status: stable. Packages: @askrjs/themes/sidebar.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 24 exports from the declarations shipped by @askrjs/themes.

### `Sidebar`

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

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

### `SidebarButtonProps`

```ts
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;

### `SidebarCollapsible`

```ts
SidebarCollapsible: "offcanvas" | "icon" | "none"
```

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

### `SidebarContent`

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

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

### `SidebarFooter`

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

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

### `SidebarGroup`

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

Groups related {@link SidebarMenu} items together.

### `SidebarGroupContent`

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

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

### `SidebarGroupLabel`

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

Renders the label for a {@link SidebarGroup}.

### `SidebarHeader`

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

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

### `SidebarInset`

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

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

### `SidebarMenu`

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

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

### `SidebarMenuAction`

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

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

### `SidebarMenuBadge`

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

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

### `SidebarMenuButton`

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

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

### `SidebarMenuItem`

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

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

### `SidebarPartProps`

```ts
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;

### `SidebarProps`

```ts
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;

### `SidebarRail`

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

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

### `SidebarRailProps`

```ts
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;

### `SidebarScope`

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

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

### `SidebarSide`

```ts
SidebarSide: "left" | "right"
```

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

### `SidebarTooltipSide`

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

Side a sidebar button's tooltip is positioned on.

### `SidebarTrigger`

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

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

### `SidebarVariant`

```ts
SidebarVariant: "sidebar" | "floating" | "inset"
```

Visual style of a {@link Sidebar }.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/sheet/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/skeleton/index.md)