This is a take on my a previous post on creating an a – z page in classic SharePoint, but this time using modern SharePoint pages. If you want to take a look at the classic SharePoint example, please click on the link below.
A modern SharePoint a – z page
So this is a modern take on the classic example I posted previously, I’ve tried to keep it as simple as possible and use all out of the box web parts, plus no code whatsoever 🙂
- What’s needed
- Create the navigation links
- Create the topic letter heading
- Create topic links
- Create a back to top link
- Hyperlink each topic letter from the top navigation
- A modern SharePoint page
- Page sections
- Text web parts
- Quick links web parts
1. Create the navigation links
To begin, create your new modern SharePoint page and in the first section and text web part add the text below:
A | B | C | D | E | F | G | H | I | J | K | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z
2. Create the topic letter heading
- Beneath your navigation links section, press the + add new section button
- Add a text web part in this section, then add your topic letter (for example: A)
- Change the font style of your topic letter to a heading style (I used Heading 1)
NOTE: I changed the background color of my topic letter heading section to make it stand out, if you want to do this just, press the Edit Section button.
3. Create topic links
- Add a new section underneath the previous
- Add a quick links web part
- Press the edit web part button and make the following changes
- leave the web part title as default, as we don’t want it to show on the page
- Layout options: list
- Show descriptions: no
- Show icons: no
- Add the quick links for this topic letter
4. Create a back to top link
We are creating a back to top link per section to allow us to jump back to the beginning of the page at any given point.
- In the same section, underneath the quick links web part, add a new text web part
- Type “back to top” > then highlight the text and press the create link icon (chain)
- Take the URL of the a – z page from the address bar and copy/ paste it into the link address field
NOTE: I didn’t use this method for the back to top links in the classic a – z example as the entire page is reloaded when clicked. In modern SharePoint only the body of the page is reloaded and works pretty well for this use.
5. Hyperlink each topic letter from the top navigation
This is the final step! We now just need to link up our navigation at the top of the page to each of our topic heading letters and we are done.
- Save the page as draft, then scroll down to a topic letter heading
- Here you will see a hyperlink icon (chain)
- Right-click on the icon > copy link
- Navigate back to the letter topics at the top of the page
- Highlight a letter > create a hyperlink, then paste the link you copied earlier in the Address field
- Save and test out your page 🙂
NOTE: Anchor links were shipped as part of the H1, H2 & H3 headings within the text web part as of October 2019. Some users have reported not seeing this functionality in their tenancy, but I would guess that could be due to release type the tenant is set to (I am Targeted Release).
That’s it, personally I think it’s way easier to create an a – z page in modern SharePoint than classic, but let me know what you think.
This has worked brilliantly but I can see the Letter and Quicklinks webparts. The instructions say leave the title as default to avoid this but I’m struggling to understand where this is.
Thanks for the comment 😊 Ive had to refresh my memory a little on this one! I think what I was trying to say was leave the title of quick links web part under each letter heading as blank.
I haven’t been able to test but I think you may actually need to just put a “space” for the title which will make it appear blank.
Hope this helps!
Do you have a screen shot screen by screen for this design? I have tried and have no luck getting to come as above.
Hi @John Lackey,
Which bit in particular are you struggling with I’ll see if I can help.
I don’t have anything off the top of my head, but I will go through this post and add more screenshots if it helps!
Sorry for the delay, I have been out of the country for work. I have the standard SharePoint 2013 and those “add new sections” is not available or do not know where to find that function. Do I need to use 365 or will what I have do the job?
Hi John, not to worry, yes this post is for SharePoint Online in O365, I’ve got an alternate version which is written using SharePoint 2010 but should work for 2013 here: https://sharepointstuff.com/2019/11/19/create-a-simple-a-z-page-in-sharepoint-classic/
Here is what I am trying to do…I have vendors with products. Some vendors have multiple products. I need to create alphabetical views…One with vendors A-Z and another with products A-Z. My clients know the vendor and others know the product name. Trying to create an easy way for them to search by either product or vendor. Hope this gives some clarity.
In this case I think I would do it using metadata. If the products are ultimately files in a library then just tag each file with the relevant product and vendor as metadata then create views based off it.
You could have the A-Z I’ve created as an index of it all but have the library with metadata and views behind it.
Sorry which quick link do you mean? Can you send a screenshot?
Hi Again, that worked thank you 🙂
Another question if you don’t mind, anyway of changing the text colour to white in the quick link boxes so it shows up , mine seems to be a blue back ground with black text…
I don’t have the hyperlink icon when i replicate?
Hi, thanks for the comment ☺️ so two things spring to mind, 1) have you used the text headings in the editor to create your topic letter? I believe using the in-built styles is what allows you to hyperlink.
Also what browser are you trying this on? I created this in Chrome and I know internet explorer doesn’t always play ball.