A disclosure / expandable panel. A clickable summary toggles a smoothly animated content region. Compose the body from any markup via the default slot, and add a leading icon or trailing badge. Group several together with a shared name for accordion behaviour (one open at a time).
A framework-agnostic web component library built with Lit.
Show code Copy < nana-details summary = "What is Nana UI?" style = "width:100%" > A framework-agnostic web component library built with Lit. </ nana-details >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/details " ;
< nana-details summary = " What is Nana UI? " style = " width:100% " >
A framework-agnostic web component library built with Lit.
Content.
Content.
Content.
Content.
Content.
Content.
Show code Copy < nana-details variant = "default" summary = "Default" style = "width:100%" >Content.</ nana-details > < nana-details variant = "outlined" summary = "Outlined" style = "width:100%" >Content.</ nana-details > < nana-details variant = "filled" summary = "Filled" style = "width:100%" >Content.</ nana-details > < nana-details variant = "card" summary = "Card" style = "width:100%" >Content.</ nana-details > < nana-details variant = "minimal" summary = "Minimal" style = "width:100%" >Content.</ nana-details > < nana-details variant = "divider" summary = "Divider" style = "width:100%" >Content.</ nana-details >
The indicator attribute sets the expand affordance — chevron, plus, or
none.
Content.
Content.
Content.
Show code Copy < nana-details indicator = "chevron" summary = "Chevron" style = "width:100%" >Content.</ nana-details > < nana-details indicator = "plus" summary = "Plus" style = "width:100%" >Content.</ nana-details > < nana-details indicator = "none" summary = "No indicator" style = "width:100%" >Content.</ nana-details >
Properties Property Attribute Type Default Description description— string''Secondary description shown under the title disabled— booleanfalseDisable the disclosure indicator— DetailsIndicator'chevron'Expand indicator style indicatorPlacementindicator-placement'start' | 'end''end'Place the indicator at the start of the summary instead of the end name— string''Accordion group name — opening one closes others sharing the name open— booleanfalseExpanded state size— DetailsSize'md'Size summary— string''Summary title text (ignored when the `summary` slot is used) variant— DetailsVariant'default'Visual style
Events Event Description nana-toggleFired whenever the open state changes (`detail.open`) nana-showFired when expanded nana-hideFired when collapsed
Slots Slot Description (default)The collapsible content summaryCustom summary content (overrides `summary` / `description`) iconLeading icon in the summary badgeTrailing badge / status before the indicator
CSS parts Part Description ::part(base)The outer container ::part(summary)The clickable trigger ::part(content)The content region
CSS custom properties Property Description --nana-details-radiusCorner radius --nana-details-paddingSummary / content padding --nana-details-durationExpand / chevron animation duration
Event Type Description nana-toggleCustomEventFired whenever the open state changes (detail.open) nana-showCustomEventFired when expanded nana-hideCustomEventFired when collapsed
Slot Description (default)The collapsible content summaryCustom summary content (overrides summary / description) iconLeading icon in the summary badgeTrailing badge / status before the indicator
Variable Default Description --nana-details-radius— Corner radius --nana-details-padding— Summary / content padding --nana-details-duration— Expand / chevron animation duration
Part Description baseThe outer container summaryThe clickable trigger contentThe content region
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Details interactively Every state, prop, and edge case — with live controls — in Storybook.
