Navigation

Introduktionstext för sidan

Overview

This page is about the menu components used for public websites:

  • Main menu for desktop, also called the mega menu
  • Main menu for mobile
  • Flow indicator, also called the subway
  • Breadcrumbs
  • Footer

 

Taxonomy and main menu

Baserat på den taxonomistruktur vi har idag så använder vi en så kallad megamenu i desktop och stegande navigation för våra sub-level länkar, detta för att öka valmöjligheten för fler målgrupper.

I SEBxx-konceptet finns det en vision om att sub-level länkarna är ingångar som vi tror är högst relevanta och tar därför användaren förhoppningsvis direkt till en sida som är ytterst relevant (baserat på analytics, test osv).

Main menu

Megamenyn bygger på fyra kolumner vilket gör att vi kan lägga in fyra segment/ domäner/ områden i bredd.

Vaje kolumn innehåller en titel och länklista. Titeln är namnet på segmentet/domänen/omådet men är inte länkad, oavsett om det finns en undersida eller ej. Länklistan är inte baserad på taxonomistrukturen utan som tidigare nämnt, sidor vi kan visa på som drar trafik eller högt prioriterade utifrån interna krav likt SEO, kampanj eller andra affärsrelaterade krav.

Desktop

Mobile

Flow indicator

Desktop

Den sub-menu som existerar idag är den så kallade tunnelbanan. Tunnelbanan ligger på sidor som ligger i en sekvens/flöde av sidor. Komponenten ligger så kallat in-line vilket betyder att den ligger mitt i content, i den högra och sista kolumnen i en 3-col samt above fold för att prompta länkarna direkt när användaren landar på aktuell sida.

Example

https://seb.se/privat/lana/bolan-och-rantor/lanelofte-och-guide/kopa-eller-salja-bostad-forst

Mobile

Den sub-menu som existerar idag är den så kallade tunnelbanan. Tunnelbanan ligger på sidor som ligger i en sekvens/flöde av sidor. Komponenten ligger så kallat in-line vilket betyder att den ligger överst på sidan i en dropdown.

 

Breadcrumbs

Desktop

I brödsmulorna för desktop så skriver vi ut hela routingen, från roten på seb.se till den aktiva sidan användaren står på. Vi länkar även föregående sidor i hierarkin eftersom brödsmulorna används till stor del som ett navigationssätt tillbaka i aktuell navigationsstruktur.

Mobile

Till skillnad från desktops version av brödsmulor så döljer vi samtliga sidor i strukturen förutom en nivå över aktuell sida som användaren står på.

 

Footer

Desktop and mobile