Custom SharePoint Server 2016 Publishing Site Collection Breadcrumb Navigation Menu Using REST

%3CLINGO-SUB%20id%3D%22lingo-sub-182545%22%20slang%3D%22en-US%22%3ECustom%20SharePoint%20Server%202016%20Publishing%20Site%20Collection%20Breadcrumb%20Navigation%20Menu%20Using%20REST%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-182545%22%20slang%3D%22en-US%22%3E%3CP%3EMy%20organization%20is%20migrating%20a%20SharePoint%202010%20publishing%20site%20collection%20to%20SharePoint%202016.%20With%20the%20jumps%20up%20in%20versions%2C%20many%20customization%20will%20not%20work%20or%20simply%20have%20to%20go%20due%20to%20the%20amount%20of%20work%20it%20would%20take%20to%20update%20them.%20One%20such%20customization%20is%20breadcrumb%20navigation.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20the%20architect%20for%20the%20collection%2C%20I%20would%20like%20to%20implement%20a%20custom%20breadcrumb%20menu%20using%20the%20REST%20APIs%2C%20queried%20via%20client%20side%20JavaScript%20using%20JSON.%20I%20have%20not%20been%20able%20to%20figure%20out%20or%20find%20suitable%20examples%20on%20which%20endpoint(s)%20to%20use%20and%20how-%20if%20this%20is%20even%20possible.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20been%20searching%20for%20anything%20I%20can%20find%20on%20SiteMapProvider.%20While%20the%20information%20I%20have%20found%20has%20been%20helpful%2C%20I%20have%20not%20found%20a%20perfect%20example%20on%20how%2C%20from%20the%20context%20of%20the%20current%20page%2C%20to%20query%20for%20the%20path%20up%20to%20the%20site%20or%20site%20collection%20root.%20We%20are%20using%20managed%20metadata%20navigation%20for%20global%20navigation%20and%20local%2Fcurrent%20navigation%20is%20manually%20structured-%20so%20I%20cannot%20easily%20parse%20the%20navigation%20tree%20to%20match%20against%20the%20current%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20assistance%20is%20appreciated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-182545%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAPIs%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-183136%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20SharePoint%20Server%202016%20Publishing%20Site%20Collection%20Breadcrumb%20Navigation%20Menu%20Using%20REST%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-183136%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%40Deleted%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20been%20working%20with%20the%20endpoints%2C%20but%20have%20not%20looked%20into%20modern%2FSPFx%20approaches.%20Thank%20you%20for%20those%20references.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20afraid%20SPFx%20is%20going%20to%20be%20burdensome%2C%20given%20all%20of%20the%20prerequisites.%20This%20is%20a%20publishing%20site%20with%20a%20custom%20design%20via%20Design%20Manager.%20The%20UI%20is%20done%2C%20it%20is%20the%20data%20that%20I%20need.%20It%20appears%20that%20the%20best%20I%20can%20do%20is%20to%20get%20a%20dump%20of%20all%20navigation%20nodes%20and%20parse%20out%20the%20breadcrumbs%20based%20on%20the%20current%20page.%20Or%20use%20the%20native%20breadcrumb%20snippet%20and%20restructure%20and%20style%20the%20heck%20out%20of%20it.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAll%20I%20need%20is%20an%20UL%2FOL%20list%20of%20breadcrumb%20links%20based%20on%20the%20current%20page.%20%3CSIGH%3E%3C%2FSIGH%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-182909%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20SharePoint%20Server%202016%20Publishing%20Site%20Collection%20Breadcrumb%20Navigation%20Menu%20Using%20REST%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-182909%22%20slang%3D%22en-US%22%3E%3CP%3EDid%20you%20try%20_api%2Fnavigation%20endpoints%3F%20Here%20are%20some%20references%20which%20can%20help%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2FPnP%2Ftree%2Fmaster%2FComponents%2FCore.TaxonomyNavigationComponents%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2FPnP%2Ftree%2Fmaster%2FComponents%2FCore.TaxonomyNavigationComponents%3C%2FA%3E%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fblog.mastykarz.nl%2Fbuilding-global-navigation-sharepoint-2013%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fblog.mastykarz.nl%2Fbuilding-global-navigation-sharepoint-2013%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-extensions%2Ftree%2Fmaster%2Fsamples%2Freact-application-tenant-global-navbar%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-extensions%2Ftree%2Fmaster%2Fsamples%2Freact-application-tenant-global-navbar%3C%2FA%3E%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Foffice%2Fdn600183.aspx%23bk_MenuState%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Foffice%2Fdn600183.aspx%23bk_MenuState%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

My organization is migrating a SharePoint 2010 publishing site collection to SharePoint 2016. With the jumps up in versions, many customization will not work or simply have to go due to the amount of work it would take to update them. One such customization is breadcrumb navigation.

 

As the architect for the collection, I would like to implement a custom breadcrumb menu using the REST APIs, queried via client side JavaScript using JSON. I have not been able to figure out or find suitable examples on which endpoint(s) to use and how- if this is even possible.

 

I've been searching for anything I can find on SiteMapProvider. While the information I have found has been helpful, I have not found a perfect example on how, from the context of the current page, to query for the path up to the site or site collection root. We are using managed metadata navigation for global navigation and local/current navigation is manually structured- so I cannot easily parse the navigation tree to match against the current page.

 

Any assistance is appreciated.

 

2 Replies

Hi @Deleted,

 

I've been working with the endpoints, but have not looked into modern/SPFx approaches. Thank you for those references.

 

I am afraid SPFx is going to be burdensome, given all of the prerequisites. This is a publishing site with a custom design via Design Manager. The UI is done, it is the data that I need. It appears that the best I can do is to get a dump of all navigation nodes and parse out the breadcrumbs based on the current page. Or use the native breadcrumb snippet and restructure and style the heck out of it.

 

All I need is an UL/OL list of breadcrumb links based on the current page. <sigh />