SharePoint Site Navigation. List with Hyperlinks for Buttons

 

SharePoint Site has a lot of great  web parts.

However, I have found that the Buttons for Site Navigation get spaced out too much, and you need to add each button individually.

While exploring SharePoint Lists, I thought why not to combine Tile View or rather Gallery List View with Hyperlink column and embed list as a webpart on site.

And so I did.

After slightly tweaking JSON I changed the standard white background to themed colour, meaning, it will adapt to the site's theme.

And the great part about using list is that it is dynamic! With every new row you get additional button.

you can also set and apply filter to use same list but different variations of buttons for different site page.

Cool, isn't it?

Start with creating new List from blank .

Add Hyperlink column.

Add more columns for filtering, something simple like text type HomePage ( Y/N), and another column Page2 ... 

Enter data

Title cannot be blank, so we have to type something in.

Select Gallery View

Save View as New view, say Buttons, or Home Buttons  ( we will need a different view for each set of navigation buttons)

Then Format current view,  Edit Card, and leave only Link ticked,

Advanced mode will take you to scary JSON script editor.

Here you can play with custom formatting. Set the width and hight of button, change colours and turn off and on other attributes.

I will change only two: turn off the selecting white circle

change "hideSelection": false,

to "hideSelection": true,

and "class": "ms-bgColor-white (around line 25) to colour of your choice

To help with colour pallet see link to MS Learn documentation

SharePoint site theming - JSON schema | Microsoft Learn

"class": "ms-bgColor-themeLight

by choosing colour with theme in name makes it dynamic, the button colour will match your site colour theme and will change accordingly.

This is the place to add hover colour 

"class": "ms-bgColor-themeLight ms-bgColor-themeLighter--hover

Save if happy with Preview.

Now let's apply filter to show only marked with "Y" rows:

Edit current view,

Scroll to Filter section and set the condition. OK.

Now we can embed List to SharePoint site.

Go to Site, Edit.

Add webpart, List, Select list,

Click Edit icon, select view , hide both command bar and  See All button

Apply

Republish

Now your site has nice navigation.

JSON for grabs for list formatting for above

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",

"height": 60,

"width": 300,

"hideSelection": true,

"fillHorizontally": true,

"formatter": {

"elmType": "div",

"attributes": {

"class": "sp-card-container"

},

"children": [

{

"elmType": "div",

"attributes": {

"class": "sp-card-defaultClickButton"

},

"customRowAction": {

"action": "defaultClick"

}

},

{

"elmType": "div",

"attributes": {

"class": "ms-bgColor-themeTertiary ms-bgColor-themeLight--hover sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"

},

"children": [

{

"elmType": "div",

"attributes": {

"class": "sp-card-lastTextColumnContainer"

},

"children": [

{

"elmType": "a",

"attributes": {

"title": "[$Link]",

"class": "ms-fontColor-white ms-fontColor-black--hover sp-card-content sp-card-urlContent sp-card-highlightedContent sp-card-keyboard-focusable",

"href": "[$Link]",

"target": "=if ([$Link] == '', '', '_blank')",

"role": "heading",

"aria-level": "3"

},

"style": {

"pointer-events": "=if ([$Link] == '', 'none', 'auto')",

"text-decoration": "=if ([$Link] == '', 'none', 'auto')",

"text-align": "center",

"padding": "7px "

},

"txtContent": "=if ([$Link.desc] == '', '–', [$Link.desc])"

}

]

}

]

}

]

}

}