navigation/@mihcm/ui·v0.21.0·stable

Main Sidebar

Figma-style main app sidebar. Compact 46px desktop rail, mobile bottom menu, expandable drilldown panel with icon, title, description, badges, nested levels, and custom panel slots. IconSidebar remains as a compatibility alias.

Configurator Examples Usage Accessibility Api

Live preview

Adjust the controls on the right; the preview and code update in real time.

Content area

Viewport: desktop. Rail tap reveals the menu, drill into nested levels and tap outside to close.

example.tsxtsx

StackBlitz

import { MainSidebar } from '@mihcm/ui/MainSidebar';

export function Example() {
  return (
    <Main Sidebar
  variant="drilldown"
  viewport="desktop"
  side="left"
  collapsible="icon"
  defaultCollapsed
  showCollapseToggle
  density="comfortable"
  panelWidth="288"
  expandedWidth="15rem"
  search
  motionPreset="expressive"
  columnsMaxVisible="3"
  hoverDelayMs="120"
  closeOnOutsideClick
  pinnedKey="none"
  theme="brand"
    ></Main Sidebar>
  );
}

Install

Both paths are valid. CLI ships the source into your repo (you own it). Install pins via npm.

npx @mihcm/cli add MainSidebar

Copies the source into components/ds/Main Sidebar.tsx. You own the file. Use --out to override the directory or --force to overwrite.