Angular Tabs, Pills & Accordion | ng-hub-ui-panels
Angular content-panels component that renders as tabs, pills or an accordion, with routing, reactive forms, keyboard navigation and CSS variables.
Interactive examples
Explore live examples that show how the library behaves in common Angular use cases.
Visualizations
One component, three views: classic underlined tabs, rounded pills and stacked accordion disclosure panels — switchable through a single `type` input.
Basic Tabs
Pills
Accordion View
Card & Content Slots
hubPanelHeader / hubPanelFooter slots work in tabs, pills and accordion too. A single standalone <hub-panel> (no container):
hub-panel renders as a card by itself. Card slots (variant, flush, fill)
Row 1 — the body scrolls; the header stays put.
Row 2 — the body scrolls; the header stays put.
Row 3 — the body scrolls; the header stays put.
Row 4 — the body scrolls; the header stays put.
Row 5 — the body scrolls; the header stays put.
Row 6 — the body scrolls; the header stays put.
Row 7 — the body scrolls; the header stays put.
Row 8 — the body scrolls; the header stays put.
Row 9 — the body scrolls; the header stays put.
Row 10 — the body scrolls; the header stays put.
Row 11 — the body scrolls; the header stays put.
Row 12 — the body scrolls; the header stays put.
Row 13 — the body scrolls; the header stays put.
Row 14 — the body scrolls; the header stays put.
Row 15 — the body scrolls; the header stays put.
Row 16 — the body scrolls; the header stays put.
Row 17 — the body scrolls; the header stays put.
Row 18 — the body scrolls; the header stays put.
Row 19 — the body scrolls; the header stays put.
Row 20 — the body scrolls; the header stays put.
Semantic Alerts
An alert can use the same header/footer slots as a card:
Semantic Strip Accent
Strip Layout
Lay out the header strip to fit any shell: stack it vertically beside the content, stretch headers to fill the width, or make an overflowing strip scrollable.
Vertical Tabs
Justified Tabs
Scrollable Tabs
Panel Management
Disable individual panels and let users add or remove panels on the fly with the ✕ affordance and the Delete key.
Disabled Panels
Removable & Dynamic Panels
Custom Templates
Replace the plain-text header with any Angular template — icons, badges or interactive controls — via the `hubPanelHeading` directive.
Custom Heading Templates
Accordion Row Actions
Form Integration
First-class ControlValueAccessor support binds the active panel(s) to Angular's reactive and template-driven forms.
Reactive Forms Integration
Multiple Selection
With `multiple`, several panels can be open at once. In the accordion view they all expand; in the tabs/pills views every active header starts its own visible panel while the following inactive headers stay grouped above that panel until the next active header starts a new block.
Multiple Selection
Click an inactive tab to split the layout into a new panel block. Click an active tab to merge that block back.
Multiple Vertical Headers
Each active header starts a new row-like vertical block. The blocks stack top-to-bottom, and the whole layout scrolls horizontally only when one row needs more width.
Tabs
Pills
Accordion Options
The accordion view supports multiple simultaneously expanded panels and an edge-to-edge `flush` layout without outer chrome.
Accordion Multiple & Flush
Accessibility
Full keyboard navigation (arrows, Home, End, Delete), roving tabindex, and correct ARIA roles for both the tablist and accordion disclosure patterns.
Keyboard Navigation
Focus a tab, then use ← → Home End. Press Delete on a removable tab to close it.