Web Parts
Favourite Sites
Display sites marked as "favourite" in a SharePoint list for quick access.
NavigationFeature Parity: 95%
Get Favourite Sites Working in 3 Steps
15-30 minutes
Prerequisites
- Bonzai 2 package installed on your site
- SharePoint list with site entries and a "Showcase" column
1
Prepare your site list
Create a SharePoint list with site entries (Title, URL, Description). Add a "Showcase" column to mark favourites.
2
Add the web part
Edit your page and add "Bonzai Favourite Sites" from the Bonzai category.
3
Configure data source
Select your site list, specify the Showcase column name and value (e.g., "Favorite"), and publish.
Column-based favouriting
Unlike browser-based favourites, this web part displays sites that have been explicitly marked in a SharePoint list using a specific column and value (similar to Favourite Documents).
When to Use This Web Part
Use this when you need to...
- Provide quick access to curated important sites
- Display organization-wide recommended sites
- Create a "Featured Sites" section
Best page locations
- Homepage — featured sites panel
- Dashboard pages — quick access to key sites
- Navigation hub — curated site shortcuts
Consider alternatives when...
- • Search-based site discovery — use Site Directory
- • Generic link lists — use Advanced Links
- • Per-user browser-based bookmarks
Related web parts:
Site Directory — searchable site catalog using SharePoint SearchAdvanced Links — custom link collections
How Favouriting Works
Favourite Sites displays sites that have been marked in a SharePoint list using a specific column and value. For example, if you have a "Site Directory" list, you can add a column named "Showcase" and set the value to "Favorite" for sites you want to appear in this web part.
- Create or use an existing SharePoint list with site information
- Add a column (e.g., "Showcase") to mark sites as favourites
- Set the column value (e.g., "Favorite") on sites you want to feature
- Configure the web part to read from that list and filter by the column/value
Choosing the Source Site
Use Site Selection Mode in the Data Source group to control where the web part reads the list from:
- Pick a site — use the SharePoint site picker to browse and select a site.
- Manual URL — type the full site URL. Leave empty to use the current page’s site.
Changing the site automatically clears the selected list so you can pick a list on the new site. The list picker is refreshed against the effective site URL whenever the site changes.
Automatic Field Discovery
The web part auto-discovers fields on your list so you don’t have to rename existing columns. For each site it looks for:
- URL — tries
SiteUrl,URL,Url,SiteURL, orLink. - Description — tries
DescriptionorSiteDescription. - Owner — tries
OwnerorSiteOwner, then falls back to the item’sAuthor(Created By). - Category — tries
CategoryorSiteCategory. - Showcase — matches by internal name, display name, or a partial match (case-insensitive) using the value in
Showcase Column Name.
Required List Schema
- Create or select a SharePoint list that stores site details.
- Add a Showcase column to mark favourites.
- Set the Showcase value (default: Favorite) on sites you want to display.
| Column | Type | Required | Notes |
|---|---|---|---|
| Title | Single line of text | Yes | Site display name (falls back to "Untitled Site" if blank) |
| SiteUrl / URL / Url / SiteURL / Link | Hyperlink or Text | Yes | Any one of these names works — first match wins |
| Description / SiteDescription | Multiple lines of text | No | Shown under the title when "Show Site Description" is on |
| Owner / SiteOwner | Person or Text | No | Shown when "Show Site Owner" is on; falls back to Created By |
| Category / SiteCategory | Choice or Text | No | Displayed as a badge and drives the site icon selection |
| Showcase (configurable name) | Single line of text or Choice | Yes | Column for marking favourites (e.g., value = "Favorite") |
Smart category icons
If your list has a
Category column, items are automatically rendered with a relevant Fluent icon based on the value (e.g., HR → People, Finance → Money, Team → Group, Project → ProjectCollection,Hub → HubSite, Communication → Communications, Intranet → Home, Sales → ShoppingCart,Legal → Library, Operations → Settings). Unknown categories fall back to Globe.Common Configurations
Featured Sites Panel
Display curated important sites
Best for: Homepage
Configuration
| title | Featured Sites |
| listName | Site Directory |
| showcaseColumnName | Showcase |
| showcaseValue | Favorite |
| maxItems | 6 |
| showDescription | On |
Quick Site Access
Compact list of key sites
Best for: Dashboard widget
Configuration
| title | My Sites |
| listName | Site Directory |
| showcaseColumnName | Showcase |
| showcaseValue | Favorite |
| maxItems | 10 |
| showDescription | Off |
| usePaging | Off |
Paginated Site List
Full list with pagination and admin remove
Best for: Admin / editor page
Configuration
| title | Bookmarked Sites |
| listName | Site Directory |
| showcaseColumnName | Showcase |
| showcaseValue | Favorite |
| usePaging | On |
| itemsPerPage | 5 |
| showOwner | On |
| allowRemove | Enabled |
| manageSitesUrl | /sites/directory |
| manageSitesText | View All Sites |
Best Practices
Use a consistent Showcase value
Use a consistent value like "Favorite" or "Featured" across all your favourite sites to ensure they appear correctly.
Combine with Site Directory
Use this web part alongside Site Directory. Site Directory provides search functionality while Favourite Sites shows curated content.
Allow Remove is shared, not per-user
Turning on Allow Remove (Admin) exposes an "x" button on each site. Clicking it clears the Showcase column on the source list item, which removes the site for everyone viewing that list. Leave this off for curated homepages and only enable it for admin/editor-facing pages.
Reference
Property Pane Configuration
Title & Navigation
| Property | Type | Description |
|---|---|---|
title | Text | Web part title (default: "My Favorite Sites"). Empty value hides the header. |
titleUrl | Text | Optional URL to make the title clickable (opens in a new tab) |
titleIconOption | Dropdown | Title Icon mode: custom ("Select Icon") or none (default: custom) |
titleIconName | Text | Fluent UI icon name shown when mode is custom (e.g., Globe, Home, FavoriteStar; default: Globe). Only visible when mode is custom. |
titleIconUrl | Text | Custom image URL for the title icon (overrides titleIconName when set) |
description | Text (Multiline) | Optional description shown below the title |
manageSitesUrl | Text | URL for the "Show More" link (shown in the footer when favourites exist and as a button on the empty state). Label in property pane: Show More URL. |
manageSitesText | Text | Label for the link (default: "Browse All Sites"). Label in property pane: Show More Text. |
Data Source
| Property | Type | Description |
|---|---|---|
siteUrlMode | Dropdown | Site Selection Mode: picker ("Pick a site") or manual ("Manual URL") (default: picker) |
selectedSites | Site Picker | Single-select SharePoint site picker; used when mode is picker |
siteUrl | Text | Manual site URL; used when mode is manual. Empty value falls back to the current page’s site. |
listName | List Picker | SharePoint list containing site information. Resolves against the effective site URL and is cleared automatically when the site changes. (default: "Site Directory") |
showcaseColumnName | Text | Column name used to filter favourites; matching is flexible (internal name, display name, partial match). (default: Showcase) |
showcaseValue | Text | Value the Showcase column must equal for the site to appear (default: Favorite) |
Display Options
| Property | Type | Description |
|---|---|---|
maxItems | Slider (1-50) | Maximum sites to fetch (default: 10). When paging is off, this is also the hard cap on visible items. |
showDescription | Toggle | Show site descriptions (default: On) |
showOwner | Toggle | Show site owner (default: Off) |
allowRemove | Toggle | Admin switch that reveals an "x" button on each site. Clicking it clears the Showcase column on the source item, removing the site for everyone (default: Disabled). |
Paging
| Property | Type | Description |
|---|---|---|
usePaging | Toggle | Enable pagination controls (default: Off) |
itemsPerPage | Slider (3-20) | Items per page when pagination is enabled (default: 5). Disabled until usePaging is on. |
Appearance
| Property | Type | Description |
|---|---|---|
chromeType | Dropdown | none, titleOnly, borderOnly, or titleAndBorder (default: titleAndBorder). With none or borderOnly, the title/description header is hidden. |
fixedHeight | Slider (0-800, step 50) | Fixed height in pixels (default: 0 = auto). When > 0, the container becomes vertically scrollable. |
Features Checklist
- ✅ Column-based favourite filtering (configurable Showcase column + value)
- ✅ Configurable title with Fluent UI icon or custom image URL, with clickable title link
- ✅ Pagination with previous/next controls and "{from}-{to} of {total}" page info
- ✅ Show/hide site description and owner (owner falls back to Created By)
- ✅ Auto-displayed category badge per site
- ✅ Smart category-based icon mapping (HR, Finance, Team, Project, Hub, Sales, Legal, etc.)
- ✅ Cross-site data source via site picker or manual URL (defaults to current site)
- ✅ Automatic list-field discovery (SiteUrl/URL/Link aliases, Description, Owner, Category, Showcase)
- ✅ Flexible Showcase column resolution (internal name, display name, partial match)
- ✅ Admin-only Remove action (clears the Showcase column on the source item)
- ✅ Chrome type options (none / title only / border only / title & border)
- ✅ Fixed height with vertical scroll overflow