Web Parts
Tabbed
Organize content in accordion, tabs, or tiles — with per-tab content sources like List View, HTML content, curated Links, and built-in lists for News, Events, Pages, and Documents.
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)
- News List: Show news pages from a pages library with a List or Card layout
- Events List: Show events from a list/pages library with a List or Card layout
- Pages List: Show pages from a pages library with a List or Card layout
- Document List: Show documents from a document library with a List or Card layout
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 |
News + Events Tabs
Common intranet hub pattern
Best for: Homepage section
Configuration
| displayMode | Tabs |
| Tab Content Type | News List / Events List |
| View Mode | Card (for visuals) or List (for density) |
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). Only applies in Tiles mode. |
tilesPerPage | Dropdown | Pagination for Tiles and Accordion (labeled “Tabs per page” in Accordion mode). Options: All, 4, 6, 8, 10, 12. |
contentHeight | Slider (0-1000, step 50) | Max height in pixels for tab/accordion/tile content areas. 0 = auto (no limit). When set, content scrolls within the fixed area. |
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, Links, News List, Events List, Pages List, or Document List |
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 (multi-select from the list’s fields)
- Toggle Show column headers on/off
- Set items to show (5-100) and enable optional paging (5-50 items per page)
- Choose a sort column and direction (Ascending/Descending)
- Optional: apply a filter based on a Choice column — pick the column, then pick the value
HTML Content
- Select Site
- Choose source: Page (a SharePoint
.aspxpage from Site Pages) or File (an.html/.htmfile from Documents, Site Assets, or Style Library) - Select a page/file from the auto-discovered dropdown, or paste a URL as a fallback if nothing is found in the common locations
- Page content is extracted from
CanvasContent1(modern pages) with fallbacks forPublishingPageContentandWikiField. File content is served raw
Links
- Select Site + Links list (fields are discovered dynamically — Title, URL/LinkUrl/Link, Icon/IconName/FluentIcon, Description, SortOrder/Order0, OpenInNewWindow/OpenInNewTab)
- Set items to show (5-100) and enable optional paging
- Toggle icons on/off
- Optional: apply a filter based on a Choice column
News List / Pages List
- Choose View Mode: List (compact rows) or Card (image cards)
- Select Site + pages library/list
- Set items to show and optional paging
- Optional: apply a filter based on a Choice column — pick the column, then pick the value (when the list has Choice fields)
Events List
- Choose View Mode: List or Card
- Select Site + events list/library
- Set items to show and optional paging
- Optional: apply a filter based on a Choice column
- Events use dynamic field discovery — start date, end date, location, and category columns are detected automatically (supports
EventDate/StartDate/OwlEventPageStartDate,EndDate/EventEndDate/OwlEventPageEndDate,Location/EventLocation/OwlEventPageLocation,Category/EventCategory/OwlEventPageCategory) - Only upcoming events are shown — items with a start date ≥ now are returned, ordered by start date ascending
Document List
- Choose View Mode: List or Card
- Select Site + document library (only document libraries — base template 101 — are shown in the picker)
- Toggle Show file metadata (
showFileMetadata) to show/hide author, file size, and modified date on each document - Set items to show and optional paging
- Optional: apply a filter based on a Choice column
- Documents show an automatic file-type icon based on extension (Word, Excel, PowerPoint, PDF, images, video, audio, archives, code, email, and more). Only files are returned (folders are filtered out)
Features Checklist
- ✅ Accordion, Tabs, and Tiles layout modes
- ✅ Single or Multiple panel display (accordion)
- ✅ Collapsible panels with configurable default state
- ✅ Fluent UI icon support for the web part title and each tab (icon picker + curated dropdown)
- ✅ Per-tab content sources (List View, HTML Content, Links, News, Events, Pages, Documents)
- ✅ Card or List view modes for News, Events, Pages, and Document lists
- ✅ Dynamic field discovery for list-based renderers (events and links adapt to common column naming)
- ✅ Optional Choice-column filtering across list-backed content types
- ✅ Paging controls for tabs/tiles and within list/link/news/events/pages/documents content (optional)
- ✅ Configurable content area height with scrollable overflow
- ✅ Theme-aware styling (reads SharePoint theme semantic colors)