Slash Commands

Slash-command flyout listing mono commands with hints beside them and a slash glyph prefix column.

Quick commands

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Nav30 } from "@/components/beste/piece/nav30";

<Nav30
  heading="Quick commands"
  commands={[
    {
      "key": "/new",
      "hint": "Start a new doc"
    },
    {
      "key": "/todo",
      "hint": "Insert a checklist"
    },
    {
      "key": "/team",
      "hint": "Mention a teammate"
    },
    {
      "key": "/embed",
      "hint": "Embed a link or file"
    }
  ]}
/>

More Nav pieces

View all Nav

Path Breadcrumb

nav13

URL-like path breadcrumb using mono segments with forward-slash dividers and a trailing chevron.

Actions

Dropdown Menu

nav16

Shadow-lifted menu with icon rows, shortcut hints on the right, and a tinted destructive Delete action.

Command Trigger

nav18

Full-width button that fires a command palette, paired with a search icon and a ⌘K kbd hint.

Context Menu

nav17

Right-click menu pointed by a corner arrow with icon rows and mono shortcut hints on the right.

Product

Company

Resources

Footer Columns

nav21

Three-column footer link grid with uppercase section headings and plain-text links underneath each.

Products

Mega Menu

nav23

Nav flyout pairing a vertical product list with a gradient promo pane spotlighting a new release.