@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
58 lines (57 loc) • 1.51 kB
JavaScript
import Menu from "./Menu.js";
import MenuItem from "./Menu.Item.js";
/**
* Optional wrapper for menu items. Simple flex container with `8px` gap (no
* background or other styling).
*
* @see https://bifrost.intility.com/react/menu
*
* @example
* // basic (vertical) menu
* <Menu>
* <a href="/"><Menu.Item>Home</Menu.Item></a>
* <a href="/profile"><Menu.Item>Profile</Menu.Item></a>
* <a href="/applications"><Menu.Item>Applications</Menu.Item></a>
* </Menu>
*
* @example
* // horizontal (inline) menu with step icons
* <Menu horizontal>
* <a href="/step1">
* <Menu.Item>
* <Icon.Step variant="completed" marginRight />
* Step 1
* </Menu.Item>
* </a>
* <a href="/step2" className="active" >
* <Menu.Item>
* <Icon.Step variant="active" marginRight />
* Step 1
* </Menu.Item>
* </a>
* [more steps...]
* </Menu>
*/
export default Object.assign(Menu, {
/**
* Menu item, equivalent to `<div className="bf-menu-item">`. Usually wrapped
* inside `<a>` or `<button>`.
*
* @example
* <a href="/page"><Menu.Item>Page</Menu.Item></a>
*
* @example
* // should get a background color when nested in a link with `active` class
* <a href="/page" className="active"><Menu.Item>Page</Menu.Item></a>
*
* @example
* // with step icon
* <a href="/step1">
* <Menu.Item>
* <Icon.Step variant="completed" marginRight />
* Step 1
* </Menu.Item>
* </a>
*/
Item: MenuItem
});