user-image Robert Razer Art Director

$0

Your income from the last year
in sales product X.

HOMER
Logo

Welcome to HOMER+ Admin Theme.

Dashboard & Analytics
Project Management
User Management
English English German Deutsch Italian Italiano Spanish Español Russian Русский Hindi हिन्दी
Notifications
9 Alerts
Critical alert: Server crash detected
30 minutes ago
High memory usage on Node A
10 minutes ago
User Avatar Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
User Avatar Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
Noah Blake updated the status of Client Onboarding
30 minutes ago
New comment on Task #142
15 minutes ago
Low battery on Device X
45 minutes ago
View All Notifications
Welcome back!
Profile Notifications Balance: $985.25 Account Settings Support Center
Lock Screen Log Out

Offcanvas

Built for Speed. Designed for Control.

  1. Homer
  2. UI
  3. Offcanvas
Offcanvas

You can trigger an offcanvas using a link with href or a button with data-bs-target, but both must include data-bs-toggle="offcanvas".

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • At vero eos et accusamus et iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
Offcanvas Backdrop

When an offcanvas and its backdrop are visible, <body> scrolling is disabled. Use data-bs-scroll to enable scrolling and data-bs-backdrop to control the backdrop visibility.

Colored with scrolling
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • At vero eos et accusamus et iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
Offcanvas with backdrop
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • At vero eos et accusamus et iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
Backdroped with scrolling
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • At vero eos et accusamus et iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
Offcanvas Placement

.offcanvas-start positions the offcanvas on the left, .offcanvas-end on the right, .offcanvas-top displays it from the top, and .offcanvas-bottom displays it from the bottom of the viewport.

Offcanvas Top
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
Offcanvas right
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
Offcanvas bottom
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
Offcanvas Left
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
Dark Offcanvas

Customize the look of offcanvases using utility classes to suit different themes, such as dark navbars. Add .text-bg-dark to .offcanvas and .btn-close-white to .btn-close for dark styling.

Dark Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
List
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
© 2015 - HOMER By WebAppLayers
10GB of 250GB Free.
Admin Customizer

Easily configure layout, styles, and preferences for your admin interface.

Skins
Default
Two
Three
Four
Five
Six
Color Scheme
Light
Dark
Topbar Color
Light
Dark
Gray
Sidenav Color
Light
Dark
Gray
Sidebar Size
Default
Collapse
Offcanvas
Layout Position
Buy Now