StellarUI

<stellar-button-nav>

Toggleable menu affordance that mirrors the shipped navicon contract while adding a custom icon prop and slot.

Properties

Preview

Sidebar usage

Northwind

Datastar-style mobile shell

sidebarOpenfalse aria-controlsnavicon-demo-menu

As in the Datastar reference implementation, the page owns the sidebar boolean and the overlay click closes it. stellar-button-nav only toggles the trigger state and labels the controlled region.

Markup

Copy

<stellar-button-nav
  for="navicon-demo-menu"
  label="Toggle menu"
>
</stellar-button-nav>

API

Complete props, events, slots, and implementation notes for the shipped navicon.

Props

Prop	Type	Default
`for`	`string`	`''`
`expanded`	`boolean`	`false`
`disabled`	`boolean`	`false`
`label`	`string`	`Toggle navigation`
`closed-icon`	`string`	`''`
`opened-icon`	`string`	`''`

Events

Event	Source	Notes
`click`	native	Bubbles from the internal button whenever the user activates the control.
`input` / `change`	`stellar-button-nav`	Emitted after a user toggle changes `expanded`.

Slots

Slot	Notes
`closed-icon`	Optional closed-state icon override. Replaces the built-in hamburger face for the closed state.
`opened-icon`	Optional opened-state icon override. Replaces the built-in close face for the open state.

Notes

The public tag is `stellar-button-nav`, matching the component's small menu-toggle affordance rather than a full disclosure component.
`expanded` is the mutable state surface. Bind it when app state owns the menu toggle, or let the component flip it locally and listen for `input` / `change`.
The `for` prop only wires accessibility through `aria-controls`. The component does not show or hide the target menu for you.
The docs preview intentionally stops at the button contract and a state readout. It does not fake owned menu disclosure behavior that belongs to app code outside the component.
The visible control now rides the shared `stellar-button` surface, using the same square ghost treatment as the other shipped button utilities instead of a one-off tiny button.
The default built-in face stays a hamburger-to-close animation, so most callers should not need any icon props at all.
Use `closed-icon` and `opened-icon` when you want different collapsed and expanded faces, and use the matching `closed-icon` and `opened-icon` slots when you need custom icon markup.
If you only override one side, the other side falls back to the built-in face for that state.