Skip to content

DOBT Style Guide

Navigation

Navigation Bar

The navigation bar should always take up the full page width. The examples below break at some viewport sizes, because they violate this rule.

Signed Out

The product name in a navigation bar can be either text or a logo, but not both.

Toggle source

Signed In

Use badges next to icons to notify the user of new information.

Toggle source

You can place secondary / tertiary actions for a page under any sidebar, including this one.

Toggle source

Tabs

Add tabs below a page subheader to let users navigate between different sections of the same view. You can optionally include dvl/components/tabs.js if you intend to switch the tab content on the client-side.

form
ratings
settings
Toggle source