Site Navigation based on selected pages from a list using SXA

Question

I have a requirement where I need to show site navigation in header based on selected pages(From a List) using SXA OOTB functionality. So its like, if a site has 10 pages, I need to show only 5 pages may be from a multilist/LinkList/Dontknowwhatelse. I simply select from multilist and show the selected pages in navigation.

I am aware of Navigation component https://doc.sitecore.com/users/sxa/17/sitecore-experience-accelerator/en/add-navigation.html

This component brings all the pages based on defined datasource say root node or Home node. I also know that we can hide pages in navigation by creating custom navigation filters and default settings. But,this needs to be done for each page.

I want to keep it simple for content editor. Editor will just select the pages from a list and they will show in header navigation.

I think, I will need to play around Lnklist/Link/Page List. However if someone has implemented such kind of functionality, it would save time.

Answer 1

Not possible with OOTB Navigation as you already discovered, however I had a similar scenario where I cloned the SXA Navigation to render Nav Items based on a data source which gives some flexibility to control Nav Items from outside Home.

1. Clone the OOTB Navigation

2. Override GetModel (Sitecore.XA.Foundation.RenderingVariants.Repositories)

   public override IRenderingModelBase GetModel()
   {
       //Ensure to fallback with Base Naviagation functionality when no Datasource
       if(string.IsNullOrWhiteSpace(Rendering.DataSource))
       {
           return base.GetModel();
       }
   
       //Need to make this call to initialize Breadcrumb Nav property 
       //which is not in use here however to avoid null exception in base
       StartItem = GetStartItem();
   
       //This gives flexibility to extend Navigation with Datasource
       StartItem = Rendering.DataSourceItem;
   
       return base.GetModel();
   }
   

Notice the StartItem from Base Navigation Repository is replaced with Datasource Item Folder.

Next Steps:

1. Create a Data Source Folder Item (Any custom template)
2. Ensure to create Child Items (As Navigable Redirect Links) inherited from /sitecore/templates/Feature/Experience Accelerator/Redirects/Redirect & also _Navigable (/sitecore/templates/Feature/Experience Accelerator/Navigation/_Navigable)

By doing this the base Navigation functionality is preserved including Nav Filtering plus we get the flexibility to render the Nav from Child Item structure using redirect Links

Here is an an example below of DS and Rendering, but you could customize to your requirements