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 >
Property Type Default Description summarystring''Summary title text (ignored when the summary slot is used) descriptionstring''Secondary description shown under the title openbooleanfalseExpanded state variant'default' | 'outlined' | 'filled' | 'card' | 'minimal' | 'divider''default'Visual style size'sm' | 'md' | 'lg''md'Size indicator'chevron' | 'plus' | 'none''chevron'Expand indicator style indicatorPlacement'start' | 'end''end'Place the indicator at the start of the summary instead of the end disabledbooleanfalseDisable the disclosure namestring''Accordion group name — opening one closes others sharing the name
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.
