Teams / SharePoint · Community sample

Modern Glossary

A dynamic SharePoint Framework web part displaying an A-Z indexed, accordion-style glossary with alphabet navigation, in-place item management, and Active/Inactive content lifecycle control.

Teams tabWeb partReactSPFx 1.23.0

Modern Glossary web part demo showing A-Z navigation and accordion expansion

The idea behind the sample

A dynamic SharePoint Framework (SPFx) web part that displays glossary terms sourced from a SharePoint list in an A-Z indexed, accordion-style layout. Features include alphabet-based navigation with disabled states for empty letters, expand/collapse-all controls, free-text search across title and description, and in-place add/edit/delete item management surfaced through a gear icon visible only in page Edit mode. Content lifecycle is controlled through an Active/Inactive Status field, filtered server-side so retired terms are never sent to the browser. Perfect for IT glossaries, acronym libraries, application directories, and other structured reference content on SharePoint pages.

Make it your own

Start with the author's setup instructions, explore the implementation, and adapt the pattern to your environment. Sample code stays in its original repository, together with its requirements, license and contribution history.

Read the source documentation

A closer look

A-Z alphabet navigation strip with Show All and Expand All controls

Manage Glossary Items panel with add, edit, and delete operations

Expanded accordion item showing description, application URL, and details URL

Keep exploring

Build your first SharePoint client-side web part — Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.
Using PnP JS with SharePoint Framework — Learn how to use PnP JS library in your SharePoint Framework solutions for modern SharePoint REST API interactions.
Fluent UI React Components — Fluent UI React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.
Working with Lists and Items using PnP JS — Learn how to work with SharePoint lists and list items using the PnP JS library, including create, read, update, and delete operations.
SharePoint Framework display modes — Learn how to detect and respond to a web part's display mode (Read vs Edit) to conditionally render editing controls.

Keep the ideas flowing

Back to all possibilities