Forem Creators and Builders 🌱

Casey πŸ’Ž for Forem Community Success

Posted on • Updated on

Adding Navigation Links

Hey Forem Creators!

Now that your own Forem is up and running, this quick tutorial will show you how to customize your site’s navigation with your most important links. . Luckily, adding navigation links is quick and simple.

You can read more about our Navigation Links on our Admin Documentation - Let's dive in!

Do you prefer watching video tutorials? Click the image below to watch!

a preview of the video tutorial

Getting Started

First, sign in to your admin account. Then, head to the admin navigation links page, /admin/customization/navigation_links

Creating a new navigation link

Click the "Add Navigation Link" button towards the top of the page.

Add Navigation Link blue button

You'll be greeted with a modal that's going to request some information from you.

The Navigation Link modal, requesting information for links

Let's take a quick look at the fields here:

Name - The name of the navigation link
URL - The URL of the navigation link
Icon - The icon, we recommend a 36x36 SVG or an SVG from the Twemoji library
Section - This lets you choose whether you want the link to be in the "Default" column or "Other" column
Position - This is the hierarchy in which the link will sit on the navigation bar. If left blank, the link will sit at the bottom of the list.
Display only when signed in - This ensures that the link is only displayed to users who've signed in.

Fields marked above with italics are not required

Finding SVGs

We recommend the Twemoji project for SVGs.

  • Find the SVG you'd like to use here (right click and save the image to get the file name)
  • Use the file name to find the SVG file in the proper folder
    • Versioned SVGs will be here
    • Non-Versioned SVGs will be here
  • Once you've found the SVG, copy the code
  • Enter the copied code into the Icon text box.

After filling out the required fields, click the "Add Link" button and navigate back to your home page.

You'll see your newly added link there!

Eddie Murphy OK gif

Top comments (1)

michaeltharrington profile image
Michael Tharrington

I liked this post enough already, but that GIF just sealed the deal. 😎