@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
62 lines (61 loc) • 1.83 kB
TypeScript
export type * from "./Menu.js";
export type * 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>
*/
declare const _default: {
({ horizontal, className, ...props }: import("./Menu.js").MenuProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
} & {
/**
* 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: import("react").ForwardRefExoticComponent<import("./Menu.Item.js").MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
};
export default _default;