Axonyx UI

Navigation

DropdownMenu

Compact navigation menu for headers, dashboards, and CMS toolbars. Arrow keys move through links; Escape closes and returns focus to the trigger.

Next: StatusLamp

Navigation actions

Open the menu with a click or ArrowDown. Follow a link with Enter; use Escape to return to the trigger.

View code
Code
asx
<DropdownMenu align="end" variant="secondary">
  <span slot="trigger">Component actions</span>
  <DropdownItem href="/components">All components</DropdownItem>
  <DropdownItem href="/blocks">Preview blocks</DropdownItem>
  <DropdownItem href="/create">Get code</DropdownItem>
</DropdownMenu>

Installation

Command
bash
cargo ax add ui
Manual setup
Cargo.toml
toml
[dependencies]
axonyx-ui = "0.0.80"
app/layout.asx
asx
use "@axonyx/ui"

Usage contract

Set align to start or end to choose the preferred menu alignment. The menu adjusts near viewport edges to stay visible. The trigger slot supplies button text; DropdownItem renders a normal link and accepts href, tone, and optional icon and meta slots.

Use ArrowDown or ArrowUp on the trigger to open and focus a link. Inside the menu, Arrow keys and Home/End move focus; Tab leaves the menu and Escape restores focus to the trigger.

Imports
asx
import { DropdownMenu } from "@axonyx/ui/foundry/DropdownMenu.asx"
import { DropdownItem } from "@axonyx/ui/foundry/DropdownItem.asx"