• Trust CRM
CRM
  • Dashboard
  • Clients
  • Deals
  • Activities
  • Reports
Workspace
  • Mail
  • Calendar
System
  • Settings
  • Changelog
UI
  • Feedback
  • Localization
  • Form
  • Sidebar form
Components
  • Actions
  • Tabs
  • Inputs
  • Pickers
  • Date & time

Tabs

One surface, switched between panels. Two looks — default and line — and three ways to handle a row of tabs that no longer fits.

Default

The triggers sit in a quiet recess, and a switched panel rises slightly as it appears. That motion is the only thing the seam adds.

Default overview. Three new this month.

line

The underlined variant, for dividing a page into sections: a line appears beneath the selected label.

line overview. Three new this month.

Icons, and disabled

A glyph sits beside the label and inherits the trigger's colour. A disabled trigger stays visible and stops accepting presses.

Board view. Twelve deals across four stages.

Inside a dialog

Tabs inside a dialog. Switch between them, then click outside to close.

When it does not fit: scroll

Reach for this first. The row stays one line and the overflow runs sideways. Only the side with more to come fades, the arrows nudge it along, and a selected tab scrolls itself into view.

The Reyes household planActive
Balance sheet
Net worth$41.56M

When it does not fit: a More menu

Show what fits and park the rest in a More menu — the shape for a screen whose tab count does not change. Picking a hidden item puts its name and glyph on the trigger.

The Reyes household planActive
Balance sheet
Net worth$41.56M

When it does not fit: icons first

Shrink every unselected tab to its glyph and leave the name to a tooltip. More fits on the line, at the cost of being harder to scan.

The Reyes household planActive
Asset history
Net worth$41.56M