The Brand Bar is a way to highlight top-level audience landing page links or other page links at the top of every site page. These links display in two groups: Audience links, which can have additional text before them, and Global CTA links, which appear on the right end of the bar.
Brand Bar is a part of the header, along with Masthead and Main Navigation. These are found in a site’s Header folder inside the site’s Data node in Content Editor.
Note: While the search bar appears in this same area, it is a separate site configuration and not considered part of the Header component.
Component Information
Benefits
- Use this component to display links at the top of every page on the site.
- There are two sets of links possible:
- Audience Links appear at the top middle on desktop and are stacked below the main navigation on mobile.
- Global CTAs appear at the top right on desktop and are stacked below Audience Links on mobile.
Example Use Cases
- Link to audience landing pages, where units can highlight specific resources, links of interest and information relevant to specific strategic audiences. For example, an Employees landing page could have links to relevant pages (i.e., an intranet, MSU email, Human Resources) as well as recent news stories of interest to employees.
- Link to specific calls to action, such as “Apply,” “Donate,” “Visit” or “Sign up for newsletter.”
Component Options and Limitations
- Units can opt to omit the Audience Links, Global CTAs or both.
- Units can opt to include intro text before the Audience Links but not before the Global CTAs.
- Audience Links and Global CTAs appear on every page within a website. They will be the same on every page.
Guidelines
- Keep text short. If text is too long, it may break to a second line, which should be avoided.
- Avoid including too many links. These should be high priority links that appear on every page. Including too many links will look cluttered and could be distracting to visitors.
- The Global CTAs should be placed on the right. Audience-based navigation should use the center link space. This ensures a cohesive secondary navigation experience across MSU's website ecosystem.
- Audience Links appear at the top middle on desktop and are stacked below the main navigation on mobile. Links are separated by vertical bars.
- Global CTAs appear at the top right on desktop and are stacked below Audience Links on mobile. Links are separated by vertical bars.
- On mobile, all links stack in the vertical menu. Be sure to check both desktop and mobile views, especially when using longer text.
Audience Text (single-line text)
- The text that appears before the Audience links
- Example “For:” appearing before audience choices
Audience Link – Link: Link (general link)
- Insert the link to be included in the Audience Link area
- The link description text is the text that displays
Global CTA – Link: Link (general link)
- Insert the link to be included in the Global CTAs area.
- The link description text is the text that displays.
