Creating a clickable navigation menu in Medium using Google Chrome

This guide will show you how to use the Google Chrome browser to create links in Medium enabling the reader to navigate to specific sections in a story.

1. Sections of a Medium post
2. What is a section ID?
3. How to find a section ID manually
4. How to find a section ID using the Chrome extension
5. How to create a link to a section using the section ID
6. How to create a table of contents in one go
7. Tips on creating menus

1. Sections of a Medium post

A Medium post — known as a story — is comprised of a series of blocks called sections. When you’re writing your post and you hit the return key it automatically creates a new section. By default this section will be a paragraph for text.

Hitting the + button at the start of the section gives you the option to add an image, video, embed, or a separator to create a break between two sections.

Each new section is set up for text by default.

Clicking the + button gives options for adding different types of content.

^ back to menu

2. What is a section ID?

Every section in a Medium post has a unique four character ID. This ID is generated when the section is first created and doesn’t change even if you add or delete additional sections elsewhere in the story.

You need to know the section ID to be able to link to it.

There are two ways to find the section ID — the manual way and the shortcut using a Google Chrome extension.

^ back to menu

3. How to find a section ID manually

• Select the start of the section you want to link to. This would normally be a section header, but could just as easily be a block of text or any other type of content.
• Right-click > Inspect (Ctrl-Shift-I)
• The inspection panel will open at the side. It should show the Elements tab by default, but if it doesn’t then select it.

• Look in the highlighted section for name="xxxx". This code comprising four letters and/or numbers is the section ID.
• Double-click on the section ID to select it, then copy it to your clipboard (Ctrl-C).

Double-click on the section ID and copy it to your clipboard

• Close the inspection panel by clicking the x in its top right-hand corner.
• > skip to 5. How to create a link to a section using the section ID

^ back to menu

4. How to find a section ID using the Chrome extension

There’s a really handy Google Chrome extension that makes it easier to find the section ID.

• Visit the Anchor Links page on the Chrome Web Store and click the Add to Chrome button.

• An Anchor Links icon will appear at the top of your browser.

• Select the start of the section you want to link to. This would normally be a section header, but could just as easily be a block of text or any other type of content.
• Click the Anchor Links icon at the top of your browser.
• A dialogue box will appear to tell you the section ID has been copied to your clipboard. Click OK.

^ back to menu

5. How to create a link to a section using the section ID

• You now have the section ID on your clipboard find and select the text you want to link from.
• Click the link icon.

Select the text you want to link from, click the link icon

• MANUAL — if you copied the section ID manually type in a hashtag # then paste the ID immediately after it (no spaces). e.g. #e03e
• CHROME EXTENSION — if you copied the section ID using the Anchor Links extension a hashtag will automatically be added to the section ID when you paste it as a link.

Paste the section ID, adding the hashtag if required

• Once you’ve added the section ID (with hashtag) hit Return and the link will be added to the text you selected.

^ back to menu

6. How to create a table of contents in one go

⚠ NB this technique is not currently working. Medium parses anchor links when pasting HTML, so the links get the edit URL of the page added. Only way to add a #id link seems to be manual for the moment ⚠

We have written some code to generate a table of contents for the page you are editing. This is useful if you want a quick bullet point list for large headings only. As it is automated, it could have unexpected results, so you should ask someone familiar with it to take you through it the first time.

To automatically create a table of contents

1. Using Chrome or Firefox, save your post/draft and ensure that the clipboard does not contain anything you need (it will be overwritten).
2. Open the browser console/developer tools (F12 or Ctrl+Shift+I ). Ensure the Console tab is selected.
3. Copy the contents of this page, paste it into the Console and hit Enter . You should never paste unfamiliar code into your console; the first time you do this, ask a colleague familiar with this technique (e.g. eLearning) to take you through it, and to show you how to verify the source of the code.
4. Go to where you want the table of contents and paste from the clipboard.
5. If you have not reloaded the page since doing the above, you can regenerate the table of contents by typing copytoc() into the console and hitting Enter (or you can repeat the above steps).

7. Tips on creating menus

Bullet point list

• To create a bulleted list start the first line with an asterisk * or a dash — followed by a space then the text.
• When you hit Return you’ll be taken to the next bullet point.
• Hitting Return twice completes the list and takes you back to regular text.

Numbered list

1. To create a numbered list start the first line with the number 1 followed by a full stop.
2. When you hit Return you’ll be taken to the next number in the list.
3. Hitting Return twice completes the list and takes you back to regular text.
4. NOTE — you can’t start at any number other than 1, and you can’t continue a numbered sequence after a section break.

‘Back to menu’ link

You’ll notice in this guide there’s a ^ back to menu link at the end of each part of the post as listed in the menu.

To add this simply find the section ID for the title, first paragraph or first menu item and link to it from an appropriate line of text such as ‘back to menu’ or ‘return to contents’. Feel free to add the circumflex accent character ^ in front of the text as a visual indicator that the link takes you up the page.

^ back to menu