Creating a clickable navigation menu in Medium using Google Chrome

  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

Each new section is set up for text by default.
Clicking the + button gives options for adding different types of content.

2. What is a section ID?

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

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

  • 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.

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.

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

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

--

--

--

Sharing resources for educators, from The University of Manchester Library

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Image File Formats: When To Use Which Format

Upgrade Drupal automatically with composer (for free!)

Build a Custom Calculator Widget in a UI Designer

assistant initial release

Introduction to Python Programming Part 3— Containers

The best Python development experience on Windows — Part 1

An introduction to Cloud native architecture

Scaling Applications on Kubernetes with Ray

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Library for Educators

Library for Educators

Sharing resources for educators, from The University of Manchester Library

More from Medium

How I Wrote 100 Articles in 100 Days

My First Medium Earnings!

Step by Step For The Medium Partner Program (MPP) Application

I Reached 100 followers