ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangePhone inputSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionChartsAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.18.0

Accordion

bs-accordion wraps a stack of bs-accordion-tab children, backed by the mp-accordion web component. Each tab declares its header with the *bsAccordionTabHeader structural directive; the rest of the tab body is projected below. Set [multi]="true" to allow multiple tabs to stay open simultaneously, or [highlightActiveTab]="true" to visually mark the active tab.

The accordion is built on native <details name> / <summary>, so it stays fully interactive with JavaScript disabled, single-open exclusivity included — and a closed tab's content is removed from the tab order and the accessibility tree by the browser itself. Headers are reachable with Tab and, once focused,  / , Home and End move between them.

Basic usage

Single-level

Profile Sign in Payment Label 1Label 2Label 3

Multi (multiple tabs open)

Profile Sign in Payment Label 1Label 2Label 3

Multi-level

Profile Sign in Payment Email address Username Password Email address Username Password info@mintplayer.comPieterjanChange it herePieterjanChange it hereLabel 2Label 3

Theming across the shadow boundary

The chrome now lives inside the web component's shadow root, so the page reaches it through Bootstrap's --bs-accordion-* custom properties and the exposed ::part(header), ::part(button) and ::part(content) — which is how the dark multi-level example above is styled.