Offcanvas

Ready Added in 2.0.0

Create an off-canvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations.

Usage

To apply this component, add the gls-offcanvas attribute to a parent <div> element and use the following classes.

Class Description
.gls-offcanvas-bar Add this class to a child <div> element.
.gls-offcanvas-close Add this class and the gls-close attribute to an <a> or <button> element to create a close button and enable its functionality.

You can use any element to toggle an off-canvas sidebar. To enable the necessary JavaScript, add the gls-toggle attribute. An <a> element needs to be linked to the id of the off-canvas container. If you are using another element, like a button, just add the gls-toggle="target: #ID" attribute to target the id of the off-canvas container.

<body>

    <!-- This is a button toggling the off-canvas -->
    <button gls-toggle="target: #my-id" type="button"></button>

    <!-- This is an anchor toggling the off-canvas -->
    <a href="#my-id" gls-toggle></a>

    <!-- This is the off-canvas -->
    <div id="my-id" gls-offcanvas>
        <div class="gls-offcanvas-bar">

            <button class="gls-offcanvas-close" type="button" gls-close></button>

        </div>
    </div>

</body>
  • Open

    Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #offcanvas-usage">Open</button>

<a href="#offcanvas-usage" gls-toggle>Open</a>

<div id="offcanvas-usage" gls-offcanvas>
    <div class="gls-offcanvas-bar">

        <button class="gls-offcanvas-close" type="button" gls-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

Overlay

To add an overlay, blanking out the page, add the overlay: true parameter to the gls-offcanvas attribute.

<div id="my-id" gls-offcanvas="overlay: true">...</div>

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="gls-button gls-button-default" type="button" gls-toggle="target: #offcanvas-overlay">Open</button>

<div id="offcanvas-overlay" gls-offcanvas="overlay: true">
    <div class="gls-offcanvas-bar">

        <button class="gls-offcanvas-close" type="button" gls-close></button>


        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

Flip modifier

Add the flip: true parameter to the gls-offcanvas attribute to adjust its alignment, so that it slides in from the right.

<div id="my-id" gls-offcanvas="flip: true">...</div>

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="gls-button gls-button-default" type="button" gls-toggle="target: #offcanvas-flip">Open</button>

<div id="offcanvas-flip" gls-offcanvas="flip: true; overlay: true">
    <div class="gls-offcanvas-bar">

        <button class="gls-offcanvas-close" type="button" gls-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

Animation modes

By default, the off-canvas slides in. But you can actually choose between different animation modes for the off-canvas’ entrance. Just add one of the following attributes.

Parameter Description
mode: slide The off-canvas slides out and overlays the content. This is the default mode.
mode: push The off-canvas slides out and pushes the site.
mode: reveal The off-canvas slides out and reveals its content while pushing the site.
mode: none The off-canvas appears and overlays the content without an animation. 
<div id="my-id" gls-offcanvas="mode: push">...</div>

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #offcanvas-slide">Slide</button>

<button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #offcanvas-push">Push</button>

<button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #offcanvas-reveal">Reveal</button>

<button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #offcanvas-none">None</button>

<div id="offcanvas-slide" gls-offcanvas="overlay: true">
    <div class="gls-offcanvas-bar">

        <button class="gls-offcanvas-close" type="button" gls-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

<div id="offcanvas-push" gls-offcanvas="mode: push; overlay: true">
    <div class="gls-offcanvas-bar">

        <button class="gls-offcanvas-close" type="button" gls-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

<div id="offcanvas-reveal" gls-offcanvas="mode: reveal; overlay: true">
    <div class="gls-offcanvas-bar">

        <button class="gls-offcanvas-close" type="button" gls-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

<div id="offcanvas-none" gls-offcanvas="mode: none; overlay: true">
    <div class="gls-offcanvas-bar">

        <button class="gls-offcanvas-close" type="button" gls-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

You can use the Nav component inside an off-canvas to create a mobile navigation.

<div id="my-id" gls-offcanvas>
    <div class="gls-offcanvas-bar">
        <ul class="gls-nav gls-nav-default">...</ul>
    </div>
</div>

  • <button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #offcanvas-nav-primary">Primary Nav</button>

<button class="gls-button gls-button-default" type="button" gls-toggle="target: #offcanvas-nav">Default Nav</button>

<div id="offcanvas-nav-primary" gls-offcanvas="overlay: true">
    <div class="gls-offcanvas-bar gls-flex gls-flex-column">

        <ul class="gls-nav gls-nav-primary gls-nav-center gls-margin-auto-vertical">
            <li class="gls-active"><a href="#">Active</a></li>
            <li class="gls-parent">
                <a href="#">Parent</a>
                <ul class="gls-nav-sub">
                    <li><a href="#">Sub item</a></li>
                    <li><a href="#">Sub item</a></li>
                </ul>
            </li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: thumbnails"></span> Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: trash"></span> Item</a></li>
        </ul>

    </div>
</div>

<div id="offcanvas-nav" gls-offcanvas="overlay: true">
    <div class="gls-offcanvas-bar">

        <ul class="gls-nav gls-nav-default">
            <li class="gls-active"><a href="#">Active</a></li>
            <li class="gls-parent">
                <a href="#">Parent</a>
                <ul class="gls-nav-sub">
                    <li><a href="#">Sub item</a></li>
                    <li><a href="#">Sub item</a></li>
                </ul>
            </li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: thumbnails"></span> Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: trash"></span> Item</a></li>
        </ul>

    </div>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
mode String slide Off-canvas animation mode: slide, reveal, push or none.
flip Boolean false Flip off-canvas to the right side.
overlay Boolean false Display the off-canvas together with an overlay.
esc-close Boolean true Close the off-canvas when the Esc key is pressed.
bg-close Boolean true Close the off-canvas when the background is clicked.
container String false Define a target container via a selector to specify where the off-canvas should be appended in the DOM. Setting it to false will prevent this behavior.

mode is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span gls-offcanvas="push"></span>

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.offcanvas(element, options);

Events

The following events will be triggered on elements with this component attached:

Name Description
beforeshow Fires before an item is shown.
show Fires after an item is shown.
shown Fires after the item’s show animation has completed.
beforehide Fires before an item is hidden.
hide Fires after an item’s hide animation has started.
hidden Fires after an item is hidden.

Methods

The following methods are available for the component:

Show

Gloss.offcanvas(element).show();

Shows the Offcanvas.

Hide

Gloss.offcanvas(element).hide();

Hides the Offcanvas.