Web Parts
Tabbed
Organize content in accordion, tabs, or tiles — with per-tab content sources like List View, HTML content, and curated Links.
LayoutFeature Parity: 95%
Get Tabbed Working in 3 Steps
15-30 minutes
Prerequisites
- Bonzai 2 package installed on your site
1
Add the web part
Edit your page and add "Bonzai Tabbed" from the Bonzai category.
2
Choose layout mode
Select a Display Mode: Accordion, Tabs, or Tiles.
3
Create tabs and configure content
Add tabs (and choose each tab’s Content Type), then use “Configure content for each tab” to connect a list, page/file content, or links list.
When to Use This Web Part
Use this when you need to...
- Organize FAQs in an accordion
- Create tabbed content sections
- Display categorized links and apps
- Save vertical space with collapsible content
Best page locations
- FAQ pages — expandable Q&A
- Department pages — categorized info
- App launchers — grouped links
- Resource pages — organized content
Consider alternatives when...
- • Long-form content — use regular page sections
- • Navigation menu — use Advanced Links
Related web parts:
Advanced Links — simple link navigationLanding — tile-based navigation
Layout Modes
- Accordion: Collapsible sections with expand/collapse icons (FAQ-style)
- Tabs: Horizontal tab navigation with content panels
- Tiles: Visual card grid of tab groups
Tab Content Types
Each tab can display one of these content types:
- List View: Render items from a SharePoint list with selectable columns and sorting
- HTML Content: Render content from a SharePoint page, or from an HTML file in a library
- Links: Render a curated links list (works well with an Advanced Links-style list schema)
Per-tab configuration
Tabbed is configured in two steps: first you create tabs (title/icon/content type), then you configure the selected tab’s content source (site, list, page/file, columns, paging, etc.).
Accordion Display Modes
When using accordion mode, you can choose:
- Single: Only one panel can be open at a time
- Multiple: Multiple panels can be open simultaneously
Common Configurations
Copy these ready-to-use configurations:
FAQ Accordion
Collapsible Q&A sections
Best for: FAQ page
Configuration
| title | FAQs |
| displayMode | Accordion |
| accordionDisplayMode | Single |
| collapsePanelsByDefault | On |
List-driven Tab
Show list items per tab
Best for: Homepage
Configuration
| title | My Apps & Documents |
| displayMode | Tabs |
| Tab Content Type | List View |
| showPanelTitle | On |
HTML Content Tab
Show a page’s content inside a tab
Best for: Department page
Configuration
| displayMode | Tabs |
| Tab Content Type | HTML Content |
| HTML Source | Page or File |
Links Tab
Curated links with optional icons
Best for: Resource hub
Configuration
| displayMode | Tiles |
| Tab Content Type | Links |
| Show Icons | On |
Best Practices
Use accordion for mobile-first
Accordion layout works better on mobile devices than horizontal tabs.
Add tabs first, then configure content
Create your tabs first, then configure each tab’s content source in the “Configure content for each tab” section.
Prefer List View for structured data
If you already have a SharePoint list for the content, List View gives you columns, sorting, and pagination without manually maintaining link items.
Reference
Property Pane Configuration
Basic Settings
| Property | Type | Description |
|---|---|---|
title | Text | Web part title (default: My Apps & Documents) |
titleIconOption | Dropdown | Title icon mode: Custom or None |
titleIconName | Icon Picker | Fluent UI icon picker (default: Sections) |
displayMode | Dropdown | Accordion, Tabs, or Tiles |
showPanelTitle | Toggle | Show panel titles (default: On) |
accordionDisplayMode | Dropdown | Single (one open) or Multiple (many open) |
collapsePanelsByDefault | Toggle | Start with panels collapsed (default: Off) |
tilesPerRow | Dropdown | Tiles columns (Auto, 2-6) |
tilesPerPage | Dropdown | Pagination for Tiles and Accordion (also labeled “Tabs per page” in Accordion mode) |
Tab Configuration
| Property | Type | Description |
|---|---|---|
tabsCollection | Collection Data | Define tabs with title, icon, and content type |
selectedTabId | Dropdown | Select which tab to configure on the per-tab configuration page |
Tab Collection Fields
| Field | Type | Description |
|---|---|---|
title | Text | Tab title (required) |
icon | Dropdown | Fluent UI icon for the tab |
contentType | Dropdown | List View, HTML Content, or Links |
Per-Tab Content Configuration
After selecting a tab, the configuration fields depend on the tab’s Content Type:
List View
- Select Site + List
- Choose visible columns
- Configure item count, paging, and sort order
HTML Content
- Select Site
- Choose source: Page or File
- Select a page/file (or paste a URL if the picker is not available)
Links
- Select Site + Links list
- Choose items to show and optional paging
- Toggle icons on/off
Features Checklist
- ✅ Accordion, Tabs, and Tiles layout modes
- ✅ Single or Multiple panel display
- ✅ Collapsible panels
- ✅ Icon support for tabs
- ✅ Per-tab content sources (List View, HTML Content, Links)
- ✅ Paging controls for tabs/tiles and for list/link content (optional)
- ✅ Theme-aware styling