Mini Menu

A collection of quick actions displayed when a user hovers over an element.

Usage

The <MiniMenu> component displays a menu of options in a small, compact format. To use it, add <MiniMenuButton> inside the <MiniMenu>.

import {
  MiniMenu,
  MiniMenuButton,
  MiniMenuSeparator,
} from "stylus-ui/MiniMenu";
import { faEdit, faTrash, faEllipsis } from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <MiniMenu>
    <MiniMenuButton icon={faEdit} />
    <MiniMenuButton icon={faTrash} />
    <MiniMenuSeparator />
    <MiniMenuButton icon={faEllipsis} />
  </MiniMenu>
);

Toggle groups

To add toggle-able groups of items, group <MiniMenuToggleItem> within <MiniMenuToggleGroup>.

import {
  MiniMenu,
  MiniMenuToggleGroup,
  MiniMenuToggleItem,
} from "stylus-ui/MiniMenu";
import {
  faAlignLeft,
  faAlignCenter,
  faAlignRight,
} from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <MiniMenu>
    <MiniMenuToggleGroup type="single" defaultValue="left">
      <MiniMenuToggleItem value="left" icon={faAlignLeft} />
      <MiniMenuToggleItem value="center" icon={faAlignCenter} />
      <MiniMenuToggleItem value="right" icon={faAlignRight} />
    </MiniMenuToggleGroup>
  </MiniMenu>
);

Multiple select

You can also set type="multiple" to enable toggling on and off multiple items in a group.

import {
  MiniMenu,
  MiniMenuButton,
  MiniMenuSeparator,
  MiniMenuToggleGroup,
  MiniMenuToggleItem,
} from "stylus-ui/MiniMenu";
import {
  faBold,
  faItalic,
  faUnderline,
  faEllipsis,
} from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <MiniMenu>
    <MiniMenuToggleGroup type="multiple" defaultValue={[]}>
      <MiniMenuToggleItem value="bold" icon={faBold} />
      <MiniMenuToggleItem value="italic" icon={faItalic} />
      <MiniMenuToggleItem value="underline" icon={faUnderline} />
    </MiniMenuToggleGroup>
    <MiniMenuSeparator />
    <MiniMenuButton icon={faEllipsis} />
  </MiniMenu>
);

Different toggled icon

You can customize the appearance of the toggled item by providing a different iconToggled for the selected state.

import {
  MiniMenu,
  MiniMenuToggleGroup,
  MiniMenuToggleItem,
} from "stylus-ui/MiniMenu";
import { faBookmark as faBookmarkRegular } from "@fortawesome/pro-regular-svg-icons";
import { faBookmark as faBookmarkSolid } from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <MiniMenu>
    <MiniMenuToggleGroup type="single" defaultValue="bookmark">
      <MiniMenuToggleItem
        value="bookmark"
        icon={faBookmarkRegular}
        iconToggled={faBookmarkSolid}
      />
    </MiniMenuToggleGroup>
  </MiniMenu>
);

In this example, we showcase both horizontal and vertical orientations side by side. The orientation prop allows you to easily switch between these layouts to best fit your design needs.

API Reference

`MiniMenu`

Inherits properties from HTMLElement

Prop	Type	Default
`asChild`	`boolean`	`false`
`loop`	`boolean`	`true`

`MiniMenuButton`

Inherits properties from HTMLButtonElement

Prop	Type	Default
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`icon`	`IconDefinition`
`value`	`string`

`MiniMenuToggleItem`

Inherits properties from HTMLButtonElement

Prop	Type	Default
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`icon`	`IconDefinition`
`iconToggled`	`IconDefinition`
`value`	`string`

`MiniMenuToggleGroup`

Inherits properties from HTMLElement

Prop	Type	Default
`type`	`"single""multiple"`
`defaultValue`	`string`
`disabled`	`boolean`	`false`
`onValueChange`	`(value: string) => void`
`value`	`string`

`MiniMenuSeparator`

Inherits properties from HTMLElement

Prop	Type	Default
`asChild`	`boolean`	`false`