Nav

Application sidebar/rail navigation: hierarchical items, URL hash sync, optional backend navigation_items feed.

HTML tag: c-ef45acdebaac34bfbb32721cf436bc2ec

When to use

• app sidebar or icon rail navigation
• hierarchical route menu from navigation_items
• SPA nav hash sync with url-changed

Props

Prop	Type	Default	Description
rail	Boolean
appearance	String	ghost
tone	String	neutral
navigation_items	Array	“
size	String	md
density	String	comfortable
full_width	Boolean	true
stacked_in_rail	Boolean	true
label_size_rail	String	xs
label_lines_rail	Number	1
align	String	center
rail_tile_size	String	var(--ab-tile-size-lg, 64px)
rail_icon_size_token	String	var(--ab-icon-size-lg)
rail_label_size_token	String	var(--ab-font-size-xs)
close_groups_on_enter_rail	Boolean
allow_expand_in_rail	Boolean	true
restore_on_exit_rail	Boolean	true
navigation__thing_id	String
data_source__thing_id	String
data_source_input_params	Object
collapse_all_on_first_render	Boolean
group_closed_icon_rail	String
group_opened_icon_rail	String

Rules

• Bind .navigation_items array or navigation__thing_id for data load.
• Listen url-changed (nav_hash) and navigation-changed (navigation_items) for SPA routing integration.
• Compose ab-nav-group + ab-nav-item children or use renderFromItems from data.
• rail mode collapses groups — tune rail/stacked props.

Events

Event	Detail
url-changed	nav_hash: String
navigation-changed	navigation_items: Array
navigation-data-load-failed	message: String, result: Object

Methods

Signature	Description
renderFromItems()
clear()

What to avoid

Do not use for overflow action lists (ab-menu). Do not use for document tabs (ab-tabs). Do not call internal _applyNavHash from generated code.

Example

<c-ef45acdebaac34bfbb32721cf436bc2ec .navigation_items=${items} .rail=${collapsed} @url-changed=${onNavHash}></c-ef45acdebaac34bfbb32721cf436bc2ec>