Section templates

Sidebars, seven ways.

Each variant below is self-contained markup you can copy straight into a page. Drag the hue slider to retint all of them at once, flip the theme to check dark mode, and narrow the window: every one is responsive.

Classic Icon rail Dark Floating Two-level Docs tree Off-canvas

Classic

Workspace switcher, search, grouped links with counts and a user menu. Best for admin panels with ten to twenty destinations.

⌘K

Amara Lewis amara@northwind.co

Support

Inbox

Live

Open tickets12

Due today4

First reply1h 42m

Icon rail

A 72px rail of icons with tooltips and an active bar. Best for tools where the canvas matters more than the navigation.

Overview

Active users2,481+12.4%

Sessions18.2k+3.1%

Churned37+5 vs last week

Daily active usersLast 14 days

Dark

Stays dark in either theme, with a brand-tinted current item and a trial card. Best for analytics and developer products.

Lumen Acme Corp · Production

9 days left on Pro

6,840 of 10,000 events

68% Upgrade to Pro

Dev Kapoor Admin

Production

Analytics

Events6.84k+18%

Conversion3.9%+0.4 pts

Net revenue$48.2k+9%

Events per weekLast 10 weeks

Floating

The sidebar as a raised card on a tinted canvas, with pill links. Best for creative tools and anything that should feel soft.

Atelier

Bring your team

3 free seats left

Projects

Brand refresh

24 files · edited 2h ago

Spring campaign

11 files · edited yesterday

Website v3

58 files · edited Mon

Packaging study

7 files · edited 12 Sep

Lookbook AW26

32 files · edited 9 Sep

Signage

5 files · edited 2 Sep

Annual report

19 files · edited 28 Aug

Menu redesign

9 files · edited 21 Aug

Two-level

A rail for workspaces and sections, and a panel for what is inside them. Best for chat, email and multi-workspace apps.

# launch-q3

Ships Thursday 9 Oct. Release notes are pinned.

24 members

Today

Priya Natarajan 9:41

Staging is green. I'm cutting the release branch at 3pm unless anyone shouts.

Tomás Ortega 9:56

One shout: the Android build still has the old onboarding copy. Fix is in review, ten minutes.

Amara Lewis 10:02

Approved. 3pm stands.

Docs tree

Nested native details groups, a version picker and a current page on a guide line. Best for documentation and knowledge bases.

Harbor Docs

Getting started

Guides

API reference

Resources

All systems normal Status

OAuth providers

Let people sign in with an account they already have. Harbor ships GitHub, Google and generic OpenID Connect; each one is four lines of config.

auth:
  providers:
    - github:
        client_id: ${GITHUB_CLIENT_ID}

Callback URLs match exactly

Including the scheme and any trailing slash. Most failed sign-ins are this.

Off-canvas

A real drawer dialog holding the sidebar, opened from the top bar. Best for phones, or any layout that needs every column.

Fieldwork

Tuesday 6 October

Good morning, Amara

2 overdue

6 visits today

First one at 8:30, Harbour Road depot.

On time

3 vans out

Next return expected 13:10.

Unread messages

Two from the night shift.