Main navigation

The main navigation provides access to Teamleader’s main features. A dark background sets the navigation apart from the main content.

Logomark

The logomark has two purposes, branding and act as a shortcut to the dashboard.

The selected state has a stronger branding role while in the default state, the mark takes a backseat in favour of the other items.

Counters

A menu item has an icon, label and an optional counter. The selected state shows a filled version of the icon, increasing contrast.

Different from the default position, the counter is placed 3px below the center. This is done to prevent the counter from sticking onto the item above.