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 (dividers act as section headers)
- Title: Display text (also used as the label for dividers)
- URL: Link destination (ignored for dividers)
- Description: Optional description
- Icon: Dropdown of common Fluent UI icons, with an “Auto-detect from URL” option that picks an icon based on the URL’s domain (Teams, Outlook, SharePoint, OneDrive, Google, GitHub, etc.)
- Image: File picker (Recent, Stock images, Web search, OneDrive, Organisational assets, Site files, Upload, Link)
- Open in New Tab: Toggle
Reorder manual links by dragging rows in the collection editor, or use the Order panel from the title bar in edit mode.
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.
- New: drag-and-drop link ordering panel (edit mode) with per-link "open in new tab" overrides.
Link Ordering (New)
In edit mode, an Order button appears next to the web part title (or just above the links if the title is hidden). It opens a side panel where you can drag links, use a position dropdown, or use up/down arrows to set your preferred display order, and toggle “open in new tab” per link. Saving the custom order automatically switches the default sort to Custom Order. Works in both SharePoint List and Manual Links modes.
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. Directory cards show the icon, title, optional category badge, description, and up to two metadata lines.
- Search: optional search box filters results by title, description, category, and both 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. A favorites sidebar is rendered only in Directory mode.
- 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 color override applied to the category label text.
Search & Sort are available in every display style
While the property pane collapses the Search, Sort & Favorites group by default outside of Directory mode, enabling
enableSearchBox or enableSortDropdown will render the toolbar above any display style. The favorites sidebar and per-card star toggle, however, are only shown in Directory mode.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.
Columns are auto-discovered by name or title
The web part matches columns by both internal name and display title (case-insensitive), so several naming variants are accepted. If no URL-named column is found, the first URL-type column in the list is used as a fallback. Category, Tag, and Metadata columns can also be explicitly selected in the property pane — those selections override auto-discovery.
- Create a list to store link items.
- Add required Title and URL fields.
- Optional: add Icon, Description, Category, Tag, Parent, and ordering fields for richer layouts.
| Column | Type | Required | Description |
|---|---|---|---|
| Title | Single line of text | Yes | Link display text (falls back to FileLeafRef if missing) |
| URL | Hyperlink / URL | Yes | Link destination. Accepted names: URL, LinkURL, Link, Url. If none are present, the first URL-type column is used, with FileRef/EncodedAbsUrl as final fallbacks. |
| Icon | Single line of text | No | Fluent UI icon name. Accepted names: Icon, IconName, FabricIcon. |
| Description | Multiple lines of text | No | Link description. Accepted names: Description, Comments, Body, Notes. |
| Category (auto-discovered) | Choice / Text | No | Default discovery names: Category, Group, LinkCategory. Admins can override via categoryFilterColumn. |
| Tag (admin-selected) | Choice / Text / Multi-choice | No | Any column chosen via tagFilterColumn. Supports string, array, and taxonomy-style values. |
| Metadata 1 & Metadata 2 (admin-selected) | Any | No | Directory mode can display up to two additional columns as metadata lines, selected via metadataColumn1 / metadataColumn2. |
| Parent | Number (item ID) | No | Parent link reference used to build flyout menus. Accepted names: ParentID, Parent, ParentLink. |
| OpenInNewWindow | Yes/No | No | Open link in a new tab. Accepted names: OpenInNewWindow, NewWindow, Target. |
| SortOrder | Number | No | Sort order. Accepted names: SortOrder, Order, ItemOrder, LinkOrder. Falls back to ID if none present. |
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 | Grouped Dropdown | Links list (auto-loaded; grouped by Links Lists, Custom Lists, Document Libraries, Pages, Other) |
manualLinksCollection | Collection Data | Manual link items, draggable to reorder (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) (default: List) |
iconSize | Dropdown | Icon size: Small, Medium, Large (default: Small) |
numberOfLinks | Dropdown | Items per row (1-6; applied in Tile, Description, and Image Gallery styles. Ignored by List, Text Only, and Directory, which render a single column. Default: 3) |
showPaging | Toggle | Enable pagination across all display styles (default: Off) |
itemsPerPage | Slider (3-50) | Items per page when pagination is enabled (default: 10) |
Search, Sort & Favorites
Search and Sort render a toolbar above the results for any display style. Favorites (sidebar and per-card star toggle) are only rendered in Directory mode.
| Property | Type | Description |
|---|---|---|
enableSearchBox | Toggle | Show a search box above results (filters by title, description, category, metadata 1 and metadata 2). Works in any display style. |
searchBoxPlaceholder | Text | Placeholder text for the search box |
enableSortDropdown | Toggle | Show a sort dropdown (A–Z, Z–A, Custom Order). Works in any display style. |
defaultSortOption | Dropdown | Default sort option: az, za, or order (automatically set to order after saving a custom link order) |
enableFavorites | Toggle | Allow end users to “star” items as favorites (Directory mode only; saved per user in browser local storage) |
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 (default: 14) |
tileHeight | Slider (0-240, step 10) | Tile height in pixels (0 = auto; default: 120) |
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 (100-400, step 20) | Gallery tile height in pixels (default: 200) |
Description Options (Links with Descriptions style only)
| Property | Type | Description |
|---|---|---|
learnMoreText | Text | Call-to-action label shown at the end of each description card (default: Learn More) |
Features Checklist
- ✅ Six display styles (List, Tiles, Descriptions, Text, Image Gallery, Directory)
- ✅ Configurable icon sizes (Small, Medium, Large)
- ✅ Custom tile colors (icon & background)
- ✅ Pagination support across all styles
- ✅ Manual Links mode (no list required) with link/divider types
- ✅ Auto-loading list picker grouped by list type (Links Lists, Custom, Libraries, Pages)
- ✅ Tenant-wide site picker (via Microsoft Graph) plus cascading subsite dropdown
- ✅ Auto-detected icons from URL (Teams, Outlook, SharePoint, Google, GitHub, etc.)
- ✅ Custom title with icon picker, optional custom icon URL, and title link
- ✅ Flyout sub-menus built from list items via the Parent column
- ✅ Dynamic Category & Tag filters with admin pre-selection and runtime user dropdowns
- ✅ Search & Sort toolbars (any display style)
- ✅ Directory mode favorites (per-user browser storage, per web part instance)
- ✅ Drag-and-drop link ordering panel with per-link “open in new tab” overrides