Web Parts
Advanced Links
Display link collections with multiple display styles: list, tiles, descriptions, text only, image gallery, or directory.
NavigationFeature Parity: 95%
Get Advanced Links Working in 3 Steps
15-30 minutes
Prerequisites
- Bonzai 2 package installed on your site
- Either a SharePoint list with links (Title, URL columns required) or Manual Links mode
1
Choose your data source
Select SharePoint List or Manual Links mode in the property pane.
2
Add the web part
Edit your page and add "Bonzai Advanced Links" from the Bonzai category.
3
Configure and publish
Select a display style, configure pagination, and publish.
When to Use This Web Part
Use this when you need to...
- Create quick links sections
- Display resource links with descriptions
- Build navigation menus with icons
- Organize external tool links
Best page locations
- Homepage — quick links widget
- Resource pages — categorized links
- Department pages — team resources
Consider alternatives when...
- • Site directory — use Site Directory
- • Page listings — use Pages Rollup
Related web parts:
Site Directory — SharePoint site listingsLanding — visual tile navigation
Display Styles
- List with Icons: Vertical list with icons (default)
- Tiles: Icon tiles in a grid layout
- Links with Descriptions: Detailed link cards with descriptions
- Text Only: Simple text links without icons
- Image Gallery: Grid of image tiles with overlay text
- Directory (New): Directory-style cards with optional metadata lines, search/sort toolbar, and favorites
Data Source Modes
- SharePoint List: Use a links list with Title and URL columns
- Manual Links: Add links directly in the web part settings
Manual Links Fields
- Type: Link or Divider
- Title: Display text
- URL: Link destination
- Description: Optional description
- Icon: Dropdown with auto-detect
- Image: File picker (stock, OneDrive, site files, upload)
- Open in New Tab: Toggle
Recent Updates
- Title icon now uses an icon picker with visual browsing.
- New Manual Links mode for list-free configurations.
- New Image Gallery display style.
- Pagination now works across all display styles (showPaging + itemsPerPage).
- New dynamic filtering: admins can choose category/tag columns and end users can filter links at runtime.
- New Directory display style with optional search, sorting, favorites, and two metadata lines.
Dynamic Filtering (New)
Advanced Links supports two layers of filtering when using a SharePoint list:
- Admin scope: choose which list columns represent Category and/or Tags, and optionally restrict allowed values.
- Runtime filters: end users can use dropdowns on the page to narrow links to a specific category/tag.
Works with your existing list columns
You can point filters at columns you already have in your links list. If you rename columns later, re-select the columns in the web part settings.
Directory Mode (New)
Directory mode is designed for app/resource directories where end users need quick scanning tools: search, sorting, and personal favorites.
- Search: optional search box filters results by title, description, category, and metadata fields.
- Sort: optional sort dropdown (A–Z, Z–A, or Custom Order).
- Favorites: optional per-user favorites saved in the browser (local storage) for that specific web part instance.
- Metadata lines: in SharePoint List mode, admins can select up to two list columns to show as extra details (with custom labels).
- Category badge: optional badge color override for the category label.
Favorites are per-user and per-web-part instance
Favorites are stored in the user’s browser (local storage) and are tied to the specific Advanced Links web part placement on the page. Clearing browser storage or switching browsers/devices will reset favorites.
Common Configurations
Copy these ready-to-use configurations:
Quick Links List
Vertical list with icons
Best for: Homepage sidebar
Configuration
| title | Quick Links |
| displayStyle | list |
| iconSize | small |
App Tiles
Grid of link tiles
Best for: App launcher
Configuration
| title | Applications |
| displayStyle | tile |
| numberOfLinks | 4 |
| showPaging | On |
| itemsPerPage | 12 |
| iconSize | large |
Resource Cards
Links with descriptions
Best for: Resource page
Configuration
| title | Resources |
| displayStyle | description |
| numberOfLinks | 3 |
| showPaging | On |
| itemsPerPage | 9 |
Footer Links
Text-only compact links
Best for: Page footer
Configuration
| displayStyle | text |
| showPaging | Off |
Resource Directory
Directory layout with search + favorites
Best for: Tools & apps directory
Configuration
| displayStyle | directory |
| enableSearchBox | On |
| enableSortDropdown | On |
| defaultSortOption | az |
| enableFavorites | On |
Best Practices
Use Fluent UI icons
The Icon column in your list should contain Fluent UI icon names (e.g., "Home", "Mail", "Calendar").
Use the title icon picker
Title icons are selected via a visual picker. Use a custom icon URL only when necessary.
Custom tile colors
In Tile mode, you can customize icon and tile background colors for branded navigation.
Reference
Links List Schema
Create a SharePoint list with these columns:
Manual Links mode bypasses the list
If you choose Manual Links, you can skip list setup and define links directly in the web part.
- Create a list to store link items.
- Add required Title and URL fields.
- Optional: add Icon, Description, Category, Parent, and ordering fields for richer layouts.
| Column | Type | Required | Description |
|---|---|---|---|
| Title | Single line of text | Yes | Link display text |
| URL | Hyperlink | Yes | Link destination URL (URL/Link/Url fields supported) |
| Icon | Single line of text | No | Fluent UI icon name |
| Description | Multiple lines of text | No | Link description (for Description style) |
| Category | Choice | No | Category for grouping |
| Metadata column (optional) | Any | No | Directory mode can display up to two additional columns as metadata lines (admin-selected in settings) |
| Parent | Number or Text | No | Parent link reference for grouping |
| OpenInNewWindow | Yes/No | No | Open link in a new tab |
| LinkOrder | Number | No | Sort order (Order/ItemOrder also supported) |
Property Pane Configuration
Title Settings
| Property | Type | Description |
|---|---|---|
title | Text | Web part title (default: Links) |
titleUrl | Text | Optional URL to make the title clickable |
titleIconOption | Dropdown | Title icon mode: Custom or None |
titleIconName | Icon Picker | Fluent UI icon picker (default: Link) |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
description | Text (Multiline) | Optional description below the title |
Data Source Settings
| Property | Type | Description |
|---|---|---|
dataSourceMode | Dropdown | SharePoint List or Manual Links |
siteSelectionMode | Dropdown | Select from available sites or enter site URL manually |
selectedSiteUrl | Dropdown | Site dropdown (picker mode) |
selectedSubsiteUrl | Dropdown | Cascading subsite dropdown (picker mode, optional) |
siteUrl | Text | Manual site URL (manual mode) |
listId | List Picker | Links list (updates based on selected site) |
viewId | View Picker | Optional view to filter links (depends on selected list) |
manualLinksCollection | Collection Data | Manual link items (manual mode only) |
Filtering (SharePoint List mode)
| Property | Type | Description |
|---|---|---|
enableCategoryFilter | Toggle | Show category filter dropdown to end users |
categoryFilterLabel | Text | Custom label for the category dropdown (e.g., Department, Group) |
categoryFilterColumn | Dropdown / Text | Select which list column to use for Category |
selectedCategories | Multi-select | Admin-selected allowed categories (optional pre-filter) |
enableTagFilter | Toggle | Show tag filter dropdown to end users |
tagFilterLabel | Text | Custom label for the tag dropdown |
tagFilterColumn | Dropdown / Text | Select which list column to use for Tags |
selectedTags | Multi-select | Admin-selected allowed tags (optional pre-filter) |
Display Options
| Property | Type | Description |
|---|---|---|
displayStyle | Dropdown | Display style: List, Tiles, Descriptions, Text, Image Gallery, Directory (new) |
iconSize | Dropdown | Icon size: Small, Medium, Large |
numberOfLinks | Dropdown | Items per row (1-6, for Tile, Description, and Image Gallery styles) |
showPaging | Toggle | Enable pagination |
itemsPerPage | Slider (3-50) | Items per page when pagination is enabled |
Search, Sort & Favorites (Directory mode)
| Property | Type | Description |
|---|---|---|
enableSearchBox | Toggle | Show a search box above results (filters by title/description/category/metadata) |
searchBoxPlaceholder | Text | Placeholder text for the search box |
enableSortDropdown | Toggle | Show a sort dropdown (A–Z, Z–A, Custom Order) |
defaultSortOption | Dropdown | Default sort option: az, za, or order |
enableFavorites | Toggle | Allow end users to “star” items as favorites (saved in browser) |
favoritesLabel | Text | Label for the favorites section (default: Favorites) |
Metadata & Badge (Directory mode, SharePoint List only)
| Property | Type | Description |
|---|---|---|
metadataColumn1 | Dropdown | Select a list column to display as “Metadata line 1” |
metadataColumn1Label | Text | Label shown before metadata line 1 (e.g., Owner) |
metadataColumn2 | Dropdown | Select a list column to display as “Metadata line 2” |
metadataColumn2Label | Text | Label shown before metadata line 2 (e.g., Phone) |
categoryBadgeColor | Text | Optional color override for the category badge text |
Tile Options (Tile display style only)
| Property | Type | Description |
|---|---|---|
fontSize | Slider (10-24) | Font size for tile text |
tileHeight | Slider | Tile height in pixels (0 = auto) |
iconColor | Text | Icon color (hex code) |
tileColor | Text | Tile background color (hex code) |
Gallery Options (Image Gallery display style only)
| Property | Type | Description |
|---|---|---|
galleryHeight | Slider | Gallery height in pixels |
Features Checklist
- ✅ Six display styles (List, Tiles, Descriptions, Text, Image Gallery, Directory)
- ✅ Configurable icon sizes
- ✅ Custom tile colors
- ✅ Pagination support across all styles
- ✅ Manual Links mode (no list required)
- ✅ Auto-loading list picker
- ✅ Custom title with icon and link
- ✅ Directory mode toolbar options: search + sorting
- ✅ Directory mode favorites (per-user browser storage)