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 } from "stylus-ui/MiniMenu";
import {
  faLink,
  faBookmark,
  faEllipsis,
} from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <MiniMenu>
    <MiniMenuButton icon={faLink} label="Copy link" />
    <MiniMenuButton icon={faBookmark} label="Save for later" />
    <MiniMenuButton icon={faEllipsis} label="More" />
  </MiniMenu>
);

Variants

Pass variant="danger" to MiniMenuButton to display a red icon on hover.

import { MiniMenu, MiniMenuButton } from "stylus-ui/MiniMenu";
import { faTrash } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <MiniMenu>
    <MiniMenuButton icon={faTrash} label="Delete" variant="danger" />
  </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-regular-svg-icons";
import {
  faAlignLeft as faAlignLeftSolid,
  faAlignCenter as faAlignCenterSolid,
  faAlignRight as faAlignRightSolid,
} from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <MiniMenu>
    <MiniMenuToggleGroup type="single" defaultValue="left">
      <MiniMenuToggleItem
        value="left"
        icon={faAlignLeft}
        iconToggled={faAlignLeftSolid}
        label="Left"
      />
      <MiniMenuToggleItem
        value="center"
        icon={faAlignCenter}
        iconToggled={faAlignCenterSolid}
        label="Center"
      />
      <MiniMenuToggleItem
        value="right"
        icon={faAlignRight}
        iconToggled={faAlignRightSolid}
        label="Right"
      />
    </MiniMenuToggleGroup>
  </MiniMenu>
);

Multiple select

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

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

export default () => (
  <MiniMenu>
    <MiniMenuToggleGroup type="multiple" defaultValue={[]}>
      <MiniMenuToggleItem
        value="bold"
        icon={faBold}
        iconToggled={faBoldSolid}
        label="Bold"
      />
      <MiniMenuToggleItem
        value="italic"
        icon={faItalic}
        iconToggled={faItalicSolid}
        label="Italic"
      />
      <MiniMenuToggleItem
        value="underline"
        icon={faUnderline}
        iconToggled={faUnderlineSolid}
        label="Underline"
      />
    </MiniMenuToggleGroup>
    <MiniMenuButton icon={faEllipsis} label="More" disabled />
  </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}
        label="Bookmark"
      />
    </MiniMenuToggleGroup>
  </MiniMenu>
);

API Reference

`MiniMenu`

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

`asChild`

boolean

`dir`

"ltr" | "rtl"

`disableGroupHover`

boolean = false

When true, menu does not show on parent group hover (only on focus).

`loop`

boolean

`orientation`

"horizontal" | "vertical"

`theme`

"light" | "dark" = "light"

Visual theme for the toolbar.

`MiniMenuButton`

A button within MiniMenu.

`icon`

Required

IconDefinition

Icon shown in the button (and in tooltip).

`label`

Required

string

Accessible label and tooltip text.

`asChild`

boolean

`variant`

"danger" | "default" = "default"

Visual style: default or danger (red).

`MiniMenuToggleItem`

A toggle button within MiniMenu. Must be rendered inside MiniMenuToggleGroup.

`icon`

Required

IconDefinition

Icon shown when the toggle is off.

`label`

Required

string

Accessible label and tooltip text.

`value`

Required

string

A string value for the toggle group item. All items within a toggle group should use a unique value.

`asChild`

boolean

`iconToggled`

IconDefinition

Optional icon shown when the toggle is on (replaces icon).

`MiniMenuToggleGroup`

A set of two-state buttons that can be toggled on or off. To be used with MiniMenuToggleItem.

`type`

Required

"single" | "multiple"

`asChild`

boolean

`defaultValue`

string | string[]

The value of the item that is pressed when initially rendered. Use defaultValue if you do not need to control the state of a toggle group. The value of the items that are pressed when initially rendered. Use defaultValue if you do not need to control the state of a toggle group.

`dir`

"ltr" | "rtl"

`disabled`

boolean = false

Whether the group is disabled from user interaction.

`loop`

boolean

`onValueChange`

(value: string) => void | (value: string[]) => void

The callback that fires when the value of the toggle group changes. The callback that fires when the state of the toggle group changes.

`orientation`

"horizontal" | "vertical"

`rovingFocus`

boolean = true

Whether the group should maintain roving focus of its buttons.

`value`

string | string[]

The controlled stateful value of the item that is pressed. The controlled stateful value of the items that are pressed.