Mini Menu

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

Inherits properties from HTMLElement

Prop	Type	Default
asChild	boolean	false
loop	boolean	true

MiniMenuButton

Inherits properties from HTMLButtonElement

Prop	Type	Default
icon	IconDefinition
label	string
asChild	boolean	false
disabled	boolean	false
value	string
variant	"default""danger"	"default"

MiniMenuToggleItem

Inherits properties from HTMLButtonElement

Prop	Type	Default
icon	IconDefinition
label	string
asChild	boolean	false
disabled	boolean	false
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