Offcanvas

  1. Base UI
  2. Offcanvas

Navigation drawer

A focused left-side menu using the existing brand image.

Workspace navigation

MetraUI

WORKSPACE

Project details

Reveal useful project context without leaving the page.

Project overview

On track

Atlas workspace

Keep the project goals, decisions, and next steps within reach.

Next milestone
Prototype review
Due date
October 28

Quick actions

A top drawer for shortcuts you can reach in a moment.

Quick actions

Choose where to pick up your work.

Create invoiceBrowse filesOpen calendar

Bottom sheet

A compact bottom panel for supporting information.

Workspace summary

Active projects

12

Tasks completed

84

Team members

18

Filter workspace

Apply filters and show the selected values on this page.

Workspace filters

This example previews your filter selection.

Create a task

A simple drawer form with native validation.

Create a task

Creates a page preview without storing task data.

Notification center

Organize recent updates in a clean, readable drawer.

Recent updates

Design review is ready

The prototype is ready for your feedback.

12 minutes ago

New files shared

The latest brand guidelines are in your shared folder.

1 hour ago

Milestone completed

The team finished the research phase.

Today

Keep the page available

An independent drawer with background scrolling enabled.

Reference notes

The page remains scrollable while this drawer is open. Close the panel using its header button.

On track

Atlas workspace

Keep the project goals, decisions, and next steps within reach.

Next milestone
Prototype review
Due date
October 28

Focused confirmation

A static backdrop keeps the decision in view.

Before you continue

Review your changes

Confirm that the workspace details are correct before your next step.

Use the close button or the acknowledgment action to dismiss this drawer.

Resource preview

Image-led content with a clear action at the end.

Workspace inspiration

A sunlit creative studio deskWorkspace journal

Make room for your next idea

Thoughtful spaces and clear routines help turn ideas into useful work.

Explore card examples