logo small logo dark logo small logo
logo small logo dark logo small logo

    • Offcanvas

    1. TechUI
    2. Base UI
    3. Offcanvas

    Offcanvas

    You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="offcanvas" is required.

    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

    Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.

    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

    Try the right and bottom examples out below.

    • .offcanvas-start places offcanvas on the left of the viewport (shown above)
    • .offcanvas-end places offcanvas on the right of the viewport
    • .offcanvas-top places offcanvas on the top of the viewport
    • .offcanvas-bottom places offcanvas on 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

    Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add .text-bg-dark to the .offcanvas and .btn-close-white to .btn-close for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding .dropdown-menu-dark to .dropdown-menu.

    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
    Theme Settings
    Color Scheme
    Layout Mode
    Topbar Color
    Menu Color
    Sidebar Size