Ribbon, Asgard Docs

Navigation & chrome

An Office-style tabbed command bar.

An Office-style ribbon interface that organizes commands into tabbed groups.

Key features:

Hierarchy: Ribbon > RibbonTab > RibbonGroup > RibbonButton
Large and small button sizes with icons above or beside labels
RibbonSplitButton and RibbonDropdown for sub-menus
Collapsible on double-click of the active tab header

Loading preview…

When to use it

Feature-rich editors (docs, sheets, design)
Desktop-style apps
Dense, grouped command sets

Properties

Prop	Type	Default	Description
`children`	`ReactNode`	—	(Ribbon) One or more RibbonTab elements that define the tab structure.
`defaultTab`	`string`	—	(Ribbon) The id of the tab that should be selected by default.
`onTabChange`	`(tabId: string) => void`	—	(Ribbon) Callback fired when the active tab changes.
`id`	`string`	—	(RibbonTab) Unique identifier for the tab, used by defaultTab and onTabChange.
`label`	`string`	—	(RibbonTab / RibbonGroup / RibbonButton) Display label for the tab header, group title, or button text.
`icon`	`ReactNode`	—	(RibbonButton) Icon element displayed alongside or above the button label.
`onClick`	`() => void`	—	(RibbonButton) Click handler invoked when the ribbon button is pressed.
`size`	`'small' \| 'large'`	`'small'`	(RibbonButton) Controls the button size. Large buttons display icon above label.

Notes

Nest RibbonGroup inside RibbonTab, and RibbonButton inside RibbonGroup to maintain the correct hierarchy.
Supports RibbonSplitButton and RibbonDropdown for advanced actions that need sub-menus.
The ribbon can collapse on double-click of the active tab header, giving users more screen real estate.

Presets