The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Menus

The ACU header incorporates a global menu (a list of top level pages (topics) of a site).

On ACU's primary sites, this menu has a large dropdown and 'sticks' to the top of the page as the user scrolls down. However, there could be cases where a simple menu is more appropriate. There is also the In-page menu (anchors links).

Best practice

  • This point is subject review. If an ACU site clearly shares the same audience as one of ACU's three main sites - the public site (prospective students and the general public), the Student Portal (ACU current students), or Staff site - consider presenting the same links on the menu as one of these sites. This is so the site feels part of the relevant main ACU site.
    • If copying the global menu from one of ACU's main sites, you are likely to need a supportive menu to links relative to the site itself, such as the Digital Standards site uses on the left.
    • The alternative is to use the Secondary header menu to link to ACU's main site such as the Public, Student or staff sites. In this way tying the site back to rest of ACU's digital ecosystem (touchpoints / websites) and avoid creating a 'silo' site which will frustrate users.
  • Make sure the menu uses links representing topics that are clear and understandable to the targeted audiences.
  • Users should find a menu easy to open, close, and interact with.
  • Menu items should be easy to scan, use the most appropriate keyword/s and avoid long menu names.

Related UI components

ACU header menus

The ACU header includes the following menu options.

  1. Simple menu
  2. Secondary menu
  3. Mega menu
  4. Sticky menu
  5. Mobile menu

Usage

The ACU mega-menu and sticky formation on scrolling is the default menu on the ACU header. However, smaller sites are less likely to need a mega-menu (large dropdown panel) and therefore should use the Simple menu instead.


Simple menu

The Simple menu version of the ACU menu is simply the the ACU menu without mega-menu (panel style) dropdown.

Usage

Small or task orientated sites generally will not require a 'mega-menu' (large dropdown panel on hover). In these cases, use a Simple menu instead. If warranted a simple dropdown as opposed to a mega-menu (panel style) dropdown may be included.

Definition

Example in action

The ACU Digital Standards site uses a Simple menu - see the header at the top of the page.


Secondary header menu

The Secondary header menu supports the main menu with links to significant but secondary sections of the site, not listed in the main menu (first level), other ACU sites or utility links such as skip to content (accessibility) or search.

Usability

Use of the Secondary header menu is optional. However, if the main menu is customised to the site itself, the Secondary header menu should be used to add links to ACU's main sites such as the Public, Student or staff sites. This ties the site back to ACU's digital touchpoints and avoids creating a 'silo' site which will frustrate users.

For accessibility it is good practice to include skip navigation links to allow users who rely on tabbing to bypass long navigation lists. Make sure you include an id at the beginning of your main content and that it matches the skipnav link. This may be hidden for aesthetic reasons and show when a user tabs

Definition

The Secondary header menu is situated on the strip with a $purple--120 background at the very top of the page header. The links are $white and in uppercase. On hover, their color state is changed by a .75 opacity along and also a top border instead of the traditional bottom border.

Secondary header menu

Code samples

Background

  • background-color: $purple--120
  • height: 2.1rem;
  • width:100%

Default state

  • font-family: Avenir book, arial, sans-serif
  • font-size: 0.75rem
  • Text color: $white

Hover, focus, active states

  • color: $white with opacity of .75
  • transition: 100ms ease-in-out
  • border-top: 0.2rem

Forthcoming...

Forthcoming...

Example in action

Secondary header menu (very top menu)

Mega-menu

The Mega-menu is used on desktop view as the default ACU menu on our main (Sitecore CMS) sites. These sites are large with extensive information architecture so that a large dropdown panel is warranted to help users find the link trail they need.

Usage

Use the mega-menu on large sites with extensive page structures.

Definition

The Mega-menu is a complicated menu which transforms into a the Sticky menu when the user scrolls down the page.

Mega-menu

Code samples

Primary menu links
  • color: $white
  • height: 2.1rem;
  • width: 100%

Hover state

  • $purple--80 background
  • padding-bottom: 2.25rem

On-click

  • Behaviour: Mega-menu panel drops down
  • $purple--120 background
  • padding-bottom: 2.25rem
Dropdown panel
  • $purple--120 background
  • $full width (content width)
  • height: 27rem (should not cover page heading)

Panel heading

  • h2 using .h1 class style
  • link
  • icon: ‘Right-Arrow-2’

Links

  • color: $white
  • Highlighted links: bold
  • Hover state: underline

Close button

  • Behaviour: on-click closes the dropdown panel
  • $red--100 background
  • padding: 1rem
  • icon: ‘Close’

Forthcoming...

Forthcoming...

Example in action

Mega menu (very top of page)

Sticky menu

The ACU menu transforms into its 'sticky' formation once a user scrolls down enough for the initial (or default) ACU menu to disappear from view.

Usage

The Sticky menu is part of the ACU menu. Ideally, it is used on all sites that have long pages requiring scrolling (both the Simple and Mega menu versions). It makes the menu accessible from any where on the page.

Behaviour

Once a user scrolls, the ACU menu transforms into the Sticky menu then stays fixed at the top of the page as the user continues to scroll down or back up the page. The Sticky menu only reverts back to the initial, default menu at the top of the page.

Definition

The Sticky menu has a $white background, matches the width of the content and incorporates the ACU search input field, with a burger menu on the far right. If the burger menu is clicked, then whole bar is replaced by the ACU menu with the $purple--100 background. If a menu item is clicked, the mega-menu dropdown panel for that item or topic drops down in the same way as discribed in the Mega menu defintion above.

Initial state

Initial state, Sticky menu

Burger menu clicked

Burger menu clicked, Sticky menu

Burger menu with dropdown panel (mega-menu)

Mega-menu

Code samples

Initial state

Menu & search panel

  • $white background
  • box-shadow: 0 0.1rem 0.5rem
  • rgba(0,0,0,0.2);

Search bar

  • $purple--80 background
  • $white background
  • left / right border: $black--40
  • placeholder text colour: $black--80
  • colour: $charcoal--120
  • colour: $black--120
  • icon: ‘Search’

Burger menu

  • colour: $charcoal--120
  • $white background
  • icon: ‘Menu-1’

ACU logo

  • $white background version
  • ‘positive’
  • height: 1.8em
Burger menu clicked

Menu

  • $purple--120 background
  • color; $white
  • full-width

Close

  • colour: $white
  • icon: ‘Close’

Hover state

  • $purple--80 background
  • padding-bottom: 2.25rem
Burger menu with dropdown panel (mega-menu)

Menu

As per mega-menu defintion

Forthcoming...

Forthcoming...

Related UI components

Example in action

Sticky menu (scroll down)

Mobile menu

The Mobile menu version of the ACU menu is part of the mobile ACU header which is fixed to the top of the screen. The menu accessed via a burger menu right next to the search icon.

Usage

The Mobile menu should be available on all sites at narrow or mobile screen widths (less than 992px wide).

In its simplest form, and therefore on small ACU sites, it should compliment the Simple desktop menu by offering the top level of links or topics. On larger sites the mobile menu should offer the first three levels as it does on the ACU Public Site.

Definition

The Mobile menu is fixted to the top of the page and therefore always accessible. The ACU desktop menu versions (Simple or Mega-menus) should transform into the mobile menu at around 991px or less.

The Mobile menu is part of the mobile header which has a $purple--100 background and takes up the full width of the screen. The menu is access by clicking on the burger menu icon ('Menu-1') which is $white. The menu then drops down a panel presenting the top level of the site in links each in its own row, separated by a thin $black--40 bottom border and including the extender icon ((Down-2') on the right so that the next nested two levels of links may be accessed. At the bottom of the menu the Secondary header menu links may be presented.

Initial state

Mobile menu

Dropdown menu (burger clicked)

Burger menu clicked, Mobile menu

Extended nested menu lists

Extended nested menu lists

Code samples

Intial state

Header

  • Behaviour: fixed to top of screen
  • background: $purple--100
  • colour: $white
  • icon: ‘Search’

Burger menu

  • colour: $white
  • icon: ‘Menu-1’
  • width: 2rem
  • margin top & right: 0.8rem

On-click

  • transform: rotate(0deg);
  • transition: .5s ease-in-out;
  • icon: ’Close’
Dropdown menu

Dropdown panel

  • background: $white
  • border: $black--40

Dropdown menu links

  • color: $charcoal--120
  • bold
  • Active / hover state: underline

Secondary header links

  • links
  • colour: $black--80
  • Active / hover: underline and $red--100

Extend button

  • colour: $black--80
  • icon: ‘Down-2’

Close button

  • colour: $white
  • icon: ‘Close’
Dropdown menu

Exented menu links

  • color: $charcoal--120
  • bold
  • Hover / active state: underline and $red--100

Forthcoming...

Forthcoming...

Example in action

Mobile menu (reduce the page width (> 990px))

In-page menu (anchor links)

The In-page menu are an optional menu to help navigation within long content heavy pages.

Usage

Use the In-page menu on long pages with a lot of content. Headings within the content make up the menu items which ink to each relvant heading as anchor links. The In-page menu should be placed below the page heading.

Behaviour

As a user scrolls the In-page menu attaches to the bottom of the Sticky menu which is fixed to the top of the page and therefore always accessible to the user. The user may click on any of the links and jump to its relevant heading. As the menu sticks to the top of the page, the user may always choose anyother menu item or heading. If the user hits the back button they should go back to the previous heading they were at as with standard anchor link behaviour.

Mobile Forthcoming...

Definition

The In-page menu is a full (content) width $white panel that attaches to the bottom of the Sticky menu on scrolling. The links are in $charcoal--120, $red--120 with a bottom border on hover, and active link also has a $red--100 bottom border with link in bold.

Initial state

Initial state, in-page menu

Sticky state

Sticky state, in-page menu

Mobile

mobile view, in-page menu

Code samples

Anchor links panel

  • Behaviour: on scroll, attaches to the bottom of the sticky menu
  • color: $charcoal--120
  • $white background
  • full width (content width)
  • min-height: 4rem
  • border: #black--40

Active (selected) anchor

  • color: $charcoal--120
  • bold
  • bottom border: 4px, $red--120,

Hover state

  • $red--120
  • padding-bottom: 2.25rem
  • bottom border: 4px, $red--120,

Mobile

  • dropdown: lists anchor headings as links
  • More forthcoming...

Forthcoming...

Forthcoming...

Example in action

In-page menu (under the page heading)