This page covers the appearance, elements & functionality of the Supernav nav bar for the Responsive Theme
Used by sites with sub and/or affiliated brands
Navigation bar elements
Site Logo / Subsite Logo
- Will link back to the homepage
- Visible on desktop layout
- Visible on mobile layout
Site Strapline / Subsite Strapline
- Optional element
- Visible on desktop layout
- Hidden on mobile layout
(Image credit: Future)
Region Selector
- Only used for internationalised sites
- Visible on desktop layout
- Visible on mobile layout
(Image credit: Future)
Socialite Links
- These link to the social networks for the site / brand
- Number and Type of links can vary between Site / Sub-sites
- Urls of the links can be unique for the Site / Sub-sites
- Visible on desktop layout
- Hidden on mobile layout
(Image credit: Future)
Subscribe button
- Expands a dropdown that links to subscription options for the site
- Visible on desktop layout
- Visible on mobile layout
(Image credit: Future)
Search
- Clicking the search icon opens up a search field
- Visible on desktop layout
- Visible on mobile layout
(Image credit: Future)
Content links
- Links to site content, List pages, Landing pages, Specific articles, External content
- Curated list controlled by editorial from the CMS
- Will resize to fit the width of the browser page, with links moved into the More menu if there is insufficient room
- Visible on Desktop layout
- Contained within the hamburger menu on mobile Layout
View of main nav on mobile layout
(Image credit: Future)
More dropdown menu
- Contains links to lower priority site content
- Curated list controlled by editorial from the CMS
- If empty in the CMS it is not visible on the site (unless browser width functionality mentioned above is triggered)
- Visible on Desktop layout
- Contained within the hamburger menu on mobile layout
View of expanded more menu on mobile layout
(Image credit: Future)
Subsite Links
- On Main site / Desktop the links appear on the right of the nav bar
- On Sub-site / Desktop the links to the main site & other sub-sites move to a bar above the main nav bar
- On Main site / Mobile the links appear at the bottom of the nav list
- On Sub-site / Mobile a link to the main site is placed above the nav list, links to the other sub-sites are not shown
Desktop
(Image credit: Future)
Mobile
(Image credit: Future)
(Image credit: Future)
