アプリのサイドバーです。ツールチップ付きのアニメーションするアイコンレール、保存される状態、グループ、折りたたみ可能な入れ子のセクション、カウンター、ワークスペースの切り替え、ユーザーメニュー、コンテナが狭いときにスライドアウトするパネル（dialog）、Ctrl/⌘ + B ショートカットを備えています。
localStorage key used to remember the state between visits.
label
string
Sidebar
Accessible name of the region and the mobile panel.
breakpoint
number (px)
768
Width of the .mv-sidebar-layout container below which the sidebar becomes a slide-out panel.
hotkey
string
b
Key combined with Ctrl/⌘ to toggle; empty to disable. Ignored while typing in a field or when another modal dialog is open.
data-state
expanded | collapsed
Set automatically (also data-sidebar on the layout).
data-mobile
boolean
Set automatically in panel mode.
Properties
Name
タイプ
Description
strings
Partial<Record<string, string>>
Overrides for the default text: expand, collapse (edge rail tooltip), close (mobile panel Close button). English defaults. Can be set before the element is defined.
Methods
Name
Description
toggle()
Collapses/expands; in mobile mode, opens/closes the panel.
collapse() / expand()
Forces the state.
Events
Name
Description
mv-toggle
detail: { collapsed }.
Content structure
Name
Description
.mv-sidebar-header / -content / -footer
Regions; -content scrolls (use a <nav aria-label>).
Titled group (the list is named by its title). data-push on a group pushes it to the bottom.
a/button.mv-sidebar-item
Item: icon (<mv-icon name> or an inline <svg>) + .mv-sidebar-label (+ .mv-sidebar-badge). aria-current="page" for the current page. data-size="lg" for a switcher (logo/avatar + <strong>/<small>).
li.mv-sidebar-sub
Collapsible section: button.mv-sidebar-item + ul.mv-sidebar-submenu of a.mv-sidebar-subitem; data-open to open it (automatic when it contains the current page).
[data-mv-sidebar-toggle]
Trigger button (inside the same .mv-sidebar-layout, or value = sidebar selector). aria-expanded, aria-controls and aria-keyshortcuts handled (an aria-keyshortcuts you set is kept).
CSS classes
Name
Description
mv-sidebar-layout
Flex container for sidebar + content; data-variant="inset": content as a floating card.
mv-sidebar-inset
Content area (container query named mv-sidebar-inset).
mv-sidebar-logo / -badge / -item-end / -separator
Logo tile, counter (data-variant="accent | danger | warning | success"; the collapsed rail's dot takes the same tone), trailing icon (<mv-icon> or <svg>), divider.
mv-sidebar-hide-collapsed
Hides an element in rail mode.
CSS variables
Name
Default
Description
--mv-sidebar-width
16rem
Expanded width.
--mv-sidebar-width-icon
3rem
Rail width.
--mv-sidebar-bg
var(--mv-bg-subtle)
Background.
--mv-sidebar-highlight
Hover background.
Accessibility
Named region; lists named by their group title; aria-current="page"; collapsible sections as <button aria-expanded aria-controls> (reported collapsed while the icon rail hides them). In rail mode, labels stay in the DOM (accessible names intact) and a tooltip appears on hover and keyboard focus; Escape dismisses it. Trigger with aria-expanded and aria-keyshortcuts. Mobile mode: modal dialog (focus trap, Escape, inert background, focus returned to the trigger) with a Close button. Ctrl/⌘ + B, never taken from a text field. Forced colors: focus, current page and counters drawn with system colors.