API reference

Sidebar API

The sidebar API centers on typed menu items, optional sections, render options, and event handler contexts.

sidebar types

interface SidebarMenuItem {
  id: string;
  label: string;
  url: string;
  icon?: string;
  arrowIcon?: string;
  children?: SidebarMenuItem[];
  onClick?: (ctx: SidebarEventContext) => void;
  onMouseEnter?: (ctx: SidebarEventContext) => void;
  onMouseLeave?: (ctx: SidebarEventContext) => void;
  onBlur?: (ctx: SidebarEventContext) => void;
  onFocus?: (ctx: SidebarEventContext) => void;
}

interface SidebarMenu {
  title: string;
  items?: SidebarMenuItem[];
  sections?: SidebarMenuSection[];
}

interface MountSidebarOptions {
  schema: SidebarMenu;
  prefix?: string;
  currentUrl?: string;
  expandMultiple?: boolean;
  autoExpandActiveChild?: boolean;
  isFloatingIndicator?: boolean;
  events?: SidebarEventHandlers;
}

type SidebarPropsOptions = Omit<MountSidebarOptions, "schema">;
type SidebarProps = { schema: string } & SidebarPropsOptions;

Mount options

mountSidebar() accepts a schema, class overrides, current URL, event handlers, prefix, expansion behavior, and optional floating active indicator.

Adapter props

SidebarPropsOptions and SidebarProps expose the same option shape for framework wrappers that receive serialized schema data.

Events

Handlers receive the event type, schema item, anchor element, and original DOM event. Put handlers on individual items or provide global handlers through mount options.

mount-sidebar.ts

mountSidebar(container, {
  schema,
  currentUrl: "/docs/sidebar",
  expandMultiple: false,
  autoExpandActiveChild: true,
  isFloatingIndicator: true,
  events: {
    onClick(ctx) {
      console.log(ctx.item.id);
    }
  }
});