Navigation options
The JUNO team can help you configure your site navigation.
For color and font configurations, see Brand options .
About navigation
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)
Internal and external links
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.
Primary navigation (desktop)
An example primary navigation bar on a desktop device. See the tables below for details.
Element | Options | |
|---|---|---|
1 | Primary navigation links (Desktop) |
|
2 | Icons |
|
Add or remove links (recommend approx. 5 max)
Change textIcon | 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 | fa-solid fa-handshake |
 | handshake | fa-regular fa-handshake |
 | handshake | fa-duotone fa-handshake |
Forum / Feed / On-demand / Library | ||
 | newspaper | 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 | fa-solid fa-bags-shopping |
 | bags-shopping | fa-regular fa-bags-shopping |
 | bags-shopping | 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 | fa-solid fa-circle-question |
 | circle-question | fa-regular fa-circle-question |
 | circle-question | 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 |
Primary navigation (mobile)
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) |
|
Choose 2 links to appear on mobile devices.Subnavigation (identical on desktop and mobile)
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 |
|
More menu (identical on desktop and mobile)
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 |
|
2 | Links |
|
3 | Admin section |
|
Remove section titles