The JUNO team can help you configure your site navigation.

For color and font configurations, see Brand options .

Site navigation is made up of multiple parts:

  • Site logo (links to the home page)

  • Primary navigation

  • Subnavigation

  • More menu

  • Profile icon menu

Navigation is identical on desktop and mobile devices, with two exceptions:

  • Primary navigation is located at the bottom of mobile screens. It’s at the top of the page on desktop devices.

  • Mobile devices only show 4 links in the primary navigation menu, even if there are more on desktop devices. Any additional links are still accessible in the More menu.

Example desktop navigation (above)

Example mobile navigation (above)

Whenever we refer to links on this page, they can be internal or external. Internal links go to another page on your site. External links go to another website.

An example primary navigation bar on a desktop device. See the tables below for details.

Element

Options

1

Primary navigation links (Desktop)

(plus) Add or remove links (recommend approx. 5 max)
(info) Change text

2

Icons

(info) Change icons (see the list of recommended options below)

Primary navigation icon options

Icon

Name

Config Name

Home / Live

house (solid)

fa-solid fa-house

house (regular)

fa-regular fa-house

house (duotone)

fa-duotone fa-house

circle-dot (solid)

fa-solid fa-circle-dot

circle-dot (regular)

fa-regular fa-circle-dot

circle-dot (duotone)

fa-duotone fa-circle-dot

Social / Directory

address-book (solid)

fa-solid fa-address-book

address-book (regular)

fa-regular fa-address-book

address-book (duotone)

fa-duotone fa-address-book

users (solid)

fa-solid fa-users

users (regular)

fa-regular fa-users

users (duotone)

fa-duotone fa-users

user (solid)

fa-solid fa-user

user (regular)

fa-regular fa-user

user (duotone)

fa-duotone fa-user

handshake
(solid)

fa-solid fa-handshake

handshake
(regular)

fa-regular fa-handshake

handshake
(duotone)

fa-duotone fa-handshake

Forum / Feed / On-demand / Library

newspaper
(solid)

fa-solid fa-newspaper

newspaper (regular)

fa-regular fa-newspaper

newspaper (duotone)

fa-duotone fa-newspaper

On-demand / Library

book (solid)

fa-solid fa-book

book (regular)

fa-regular fa-book

book (duotone)

fa-duotone fa-book

clapperboard-play (solid)

fa-solid fa-clapperboard-play

clapperboard-play (regular)

fa-regular fa-clapperboard-play

clapperboard-play (duotone)

fa-duotone fa-clapperboard-play

Learning / Courses / Teaching

graduation cap (solid)

fa-solid fa-graduation-cap

graduation cap (regular)

fa-regular fa-graduation-cap

graduation cap (duotone)

fa-duotone fa-graduation-cap

apple-whole (solid)

fa-solid fa-apple-whole

apple-whole (regular)

fa-regular fa-apple-whole

apple-whole (duotone)

fa-duotone fa-apple-whole

Schedule / Map

calendar-lines (regular)

fa-regular fa-calendar-lines

calendar-lines (solid)

fa-solid fa-calendar-lines

calendar-days(duotone)

fa-duotone fa-calendar-days

map-location-dot (regular)

fa-regular fa-map-location-dot

map-location-dot (solid)

fa-solid fa-map-location-dot

map-location-dot (duotone)

fa-duotone fa-map-location-dot

Presentations / Posters / Keynotes / Speakers

screen-users (solid)

<fa-solid fa-screen-users

screen-users (regular)

fa-regular fa-screen-users

screen-users (duotone)

fa-duotone fa-screen-users

presentation-screen (regular)

fa-regular fa-presentation-screen

presentation-screen (solid)

fa-solid fa-presentation-screen

presentation-screen (duotone)

fa-duotone fa-presentation-screen

keynote (solid)

fa-solid fa-keynote

keynote (regular)

fa-regular fa-keynote

keynote (duotone)

fa-duotone fa-keynote

Companies / Exhibitors / Partners / Sponsors

briefcase (solid)

fa-solid fa-briefcase

briefcase (regular)

fa-regular fa-briefcase

briefcase (duotone)

fa-duotone fa-briefcase

buildings (solid)

fa-solid fa-buildings

buildings (regular)

fa-regular fa-buildings

buildings (duotone)

fa-duotone fa-buildings

store (solid)

fa-solid fa-store

store (regular)

fa-regular fa-store

store (duotone)

fa-duotone fa-store

Products / Sellers

box-open-full (solid)

fa-solid fa-box-open-full

box-open-full (regular)

fa-regular fa-box-open-full

box-open-full (duotone)

fa-duotone fa-box-open-full

bags-shopping
(solid)

fa-solid fa-bags-shopping

bags-shopping
(regular)

fa-regular fa-bags-shopping

bags-shopping
(duotone)

fa-duotone fa-bags-shopping

dolly (solid)

fa-solid fa-dolly

dolly (regular)

a-regular fa-dolly

dolly (duotone)

fa-duotone fa-dolly

FAQ

circle-question
(solid)

fa-solid fa-circle-question

circle-question
(regular)

fa-regular fa-circle-question

circle-question
(duotone)

fa-duotone fa-circle-question

More

bars-staggered (solid)

fa-solid fa-bars-staggered

bars-staggered (regular)

fa-regular fa-bars-staggered

bars-staggered (duotone)

fa-duotone fa-bars-staggered

An example primary navigation bar on a mobile device. See the tables below for details.

Fewer primary navigation links fit on mobile devices. Your site’s home page is always the first link, and More is always the fourth link. Then you can choose two more.

The links you choose don’t have to be the same as those on desktop devices. They can even be links that exist somewhere else in subnavigation. Think about what is most important to your mobile app users! For example, they might want a direct link to the schedule page while they’re on the go.

Element

Options

1

Primary navigation links (Mobile)

(tick) Choose 2 links to appear on mobile devices.
(info) Change the text so that it’s different on mobile devices than on desktops. This can help the text fit on small screens.

An example subnavigation bar on a desktop device. See the tables below for details.

When you click a primary navigation link, a subnavigation bar appears with additional links for that section of the site.

Element

Options

1

Subnavigation links

(plus) Add or remove links
(info) Change text

An example More menu. See the tables below for details.

The More menu is a comprehensive list of all navigation links. It includes everything from primary navigation and subnavigation, as well as additional links.

The top section must remain as is. It’s identical to your primary and subnavigation (as configured on desktop). But the other sections are flexible:

Element

Options

1

Additional sections

(plus) Add or remove sections
(info) Change section titles (recommend 26 characters max)
(error) Remove section titles

2

Links

(plus) Add or remove links
(info) Change text (20 characters max)

3

Admin section

(plus) Add or remove links. These are restricted so that only site admins can see them. Regular attendees won’t see the link at all.