Menu

Naar inhoud

Websites

Login NL - EN

2. Navigation

In the header the visitor can see which Ghent University website he has reached. Header, breadcrumb and footer together form the basic layout.

Navigation through the website is possible via elements situated in the header and footer.

See 'Basic layout' template with navigation elements

Below are 4 examples of headers used on existing websites.

A) Basic version without title

  • Logo top left: always links through to home page www.ugent.be or www.ugent.be/en (depending on website language)
  • In blue area:
    • Search box
    • Any quick links (e.g. ‘For personnel’)
    • Choice of language (always written in full, e.g. 'In English')
  • Top navigation: 
    • Max. 6 items side by side (on mobile devices this is called a ‘hamburger’ menu)
    • Target groups: via expandable menu ‘Info for’

 

See 'Basic layout' template with navigation elements

B) Version with short title (e.g.: www.ugent.be/student)

  • Same as version without title
  • In blue area:
    • Short title (max. 25 characters): clickable with link to home page of your website
    • Any relevant quick links

 

See 'Homepage central target group' template

C) Faculty version (e.g.: www.ugent.be/ge)

  • Same as version without title
  • In blue area:
    • Faculty icon: clickable with link to faculty home page
    • Link to ‘Home UGent’

 

See overview of faculty icons

See 'Homepage faculty' template

The breadcrumbs represent the hierarchical path from the home page to the page where the user ends up.

Breadcrumbs are an additional tool to help users navigate your website. The breadcrumbs also allow the user to jump quickly to a higher level.

In addition the breadcrumb path enables better scoring in Google.

Guidelines

  • The breadcrumb always starts with Home
  • All components are clickable except the last item
  • The components are separated by the greater than sign ‘>’

The footer at the bottom of the web page repeats the most important navigation items. We use the same sequence as that of the links in the top navigation.

A) Basic version

Generic fat footer

  • 3 first main items from top navigation of your website with corresponding sublinks below
  • Social media icons (mouseover in original colour of social media channel)
  • Links for Feedback form - Disclaimer - Cookies - Accessibility – Log in/out

It is recommended but not mandatory to refer to copyright. Indicate ‘Ghent University’ as copyright holder and the year of first publication (e.g. '© 2015 Ghent University') or several years if there have been amendments (e.g. '©2015-2017 Ghent University').

B) Version incl. faculty icon

This example is relevant for faculties, departments, research groups or labs that want to provide a back click to the home page of the (host) faculty.

The faculty icon (see 2.7 Faculty icons) is included between the link lists and social media icons. The content of the link lists can be programmed to fit in with your website.

Navigation on long detail pages with multiple subtitles. Every link in the subnavigation corresponds to an H2 title on the page (see 3.2 Typography).

This navigation menu moves when the user scrolls up and down the page or when he clicks on a link in the subnavigation.

See template 7.4 Detail page with page navigation

To top