Nav Group

Collapsible section header inside ab-nav containing ab-nav-item children.

HTML tag: c-edfdf2fc8cbcc4b56a557e8ba0c3c7fcc

When to use

• collapsible nav section inside ab-nav
• nested sidebar group with children
• not a popup menu group

Props

Prop	Type	Default	Description
label	String
active	String
open	Boolean	false
collapsible	Boolean	true
rail	Boolean
icon	String
badge	String
indent_level	Number
appearance	String
tone	String
size	String
density	String
full_width	String
close_on_enter_rail	Boolean	true
allow_expand_in_rail	Boolean	true
keep_active_open_in_rail	Boolean	true
restore_on_exit_rail	Boolean	true
header_variant	String	section
shape	String	rounded
layout	String	inline
stacked_in_rail	Boolean	true
icon_size_rail	String	lg
label_size_rail	String	xs
label_lines_rail	Number	1
align	String	center
chevron_position	String	end
expanded_icon	String	mi:keyboard_arrow_down
collapsed_icon	String	mi:keyboard_arrow_right
header_href	String
short_label	String
title	String
show_trailing_in_rail	Boolean
auto_expand_active	Boolean	true
allow_close_with_active_child	Boolean	true
rail_closed_icon	String
rail_opened_icon	String

Rules

• Must live under ab-nav (or rendered from navigation_items tree).
• open / collapsible / toggle event for expand state; methods open_group, close_group, toggle.
• label, icon, badge on header; auto_expand_active opens when child is active.
• Rail mode: use rail-specific icon props and close_on_enter_rail.

Events

Event	Detail
toggle	open: Boolean

Methods

Signature	Description
toggle()
open_group()
close_group()

What to avoid

Do not use for popup menus (ab-menu). Do not use as a single link without children (ab-nav-item).

Example

<c-edfdf2fc8cbcc4b56a557e8ba0c3c7fcc .label=${'Settings'} .open=${true} @toggle=${e => open = e.detail.open}>
  <c-ef651edb8a7d24f0fbd4c60e6a9d10287 .label=${'Profile'} .href=${'/profile'}></c-ef651edb8a7d24f0fbd4c60e6a9d10287>
</c-edfdf2fc8cbcc4b56a557e8ba0c3c7fcc>