Navigation

Horizontal Navbar

A horizontal navbar should have the logo on the left linking to the home page, and links on the right using flexbox. The navbar should also collapse into a hamburger menu with the links arranged vertically at smaller screen sizes. Horizontal navbars should be preferred when the links can comfortably fit into a single row on non-mobile widths. If the number of links is such that multiple rows are needed at widths where the menu does not collapse into a hamburger menu, a vertical navbar should be considered instead

To use a horizontal navbar, copy the HTML and CSS from the codepen linked below, changing the logotype and the target, label, and number of links as needed, and include the Javscript from the codepen in all pages using the navbar.

See the Pen Navigation by Tyson Foster (@Foster-Design-System) on CodePen.

Vertical Navbar

A vertical nav should be used when there is a larger amount of links, or when the links are grouped into categories (such as for the pages of this design system).

To use a vertical navbar, copy the HTML and CSS from the codepen linked below, changing the logotype and the target, label, and number of links and headers as needed, and include the Javscript from the codepen in all pages using the navbar.

The colours used for the navbar are as follows:

See the Pen Sidebar Nav by Tyson Foster (@Foster-Design-System) on CodePen.

Navigation Colours

Background:

#191919 rgba(25, 25, 25, 1)

Text:

Default: #00aeef rgba(0, 174, 239, 1)

Hover: #ffffff rgba(255, 255, 255, 1)

Visited: #73daff rgba(115, 218, 255, 1)

The hamburger icon should be coloured white #ffffff when the hamburger menu is open, and when the menu is closed, it should be white if the main background is dark, or black #191919 when the main background is light