Drawer

Usage

See design usage guidelines

The Drawer component is a side panel that appears on the screen to provide access to secondary information or functionality without navigating away from the current view.

Edit Usermultiply

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime fugiat eum culpa sed quod! Amet at sit deleniti doloremque vitae nesciunt, distinctio nemo nisi ab consequuntur molestiae omnis voluptatum magni fugiat commodi est voluptatibus voluptates in officia accusantium inventore, non ducimus repellat officiis! Odio aperiam, voluptate amet laboriosam quos corporis, qui dolorum modi rerum, possimus adipisci tenetur veritatis illum perferendis aliquid voluptates et repellat animi fuga saepe reprehenderit quasi similique praesentium ut. Illum delectus labore vel iste sit eius atque accusamus veritatis incidunt maiores harum magni fuga a aut quam facere, aliquam impedit recusandae debitis neque minima corporis dolor tenetur. Laudantium veritatis, distinctio corrupti temporibus eaque saepe. Adipisci beatae obcaecati tempora cumque animi in similique ipsa explicabo quasi tenetur porro, quisquam, atque natus! Iste, inventore ut! Molestias quidem aspernatur officia corrupti perferendis sapiente. Iste quibusdam consectetur blanditiis eius impedit! Soluta tenetur consequuntur atque aperiam saepe eveniet nihil quis voluptas. Beatae fugit numquam voluptatum sed, soluta atque voluptatem quidem non consectetur ipsa saepe. Velit consequatur corrupti officia aut animi eum quod quam cum ipsum sed vel dolorum necessitatibus sint fugit tenetur, tempora ea perspiciatis atque repellendus inventore totam quas explicabo dolorem in? Dicta velit alias voluptates illum asperiores aliquam cumque corrupti corporis, sed recusandae, dolor inventore similique et rem doloribus repudiandae! Autem nulla exercitationem nam eum fugit ipsam quos atque doloremque voluptates, sequi animi voluptatem. Aut iste adipisci aliquam voluptatum aspernatur debitis voluptas libero atque minima? Recusandae eveniet non nihil vitae similique, suscipit doloremque voluptatum vel sed cum reprehenderit iure nisi consequuntur quod et illo. Harum praesentium, est, debitis hic voluptatum perspiciatis optio quas voluptate quia, rem laudantium repudiandae? Porro earum dicta omnis vitae impedit expedita temporibus, cumque libero, quam deleniti provident laboriosam, placeat ipsa suscipit molestias vel ut quaerat quos eius perferendis voluptas repellat. Culpa magni voluptas consequuntur in vel quo a quidem temporibus. Corrupti dolores ea cupiditate eaque repudiandae illo reiciendis impedit neque, est tenetur quasi quas quidem placeat aut doloremque porro. Ad deleniti unde nihil harum enim inventore! Dolorum sint quisquam et perspiciatis eos tenetur ipsa voluptatem exercitationem quod reiciendis. Alias exercitationem voluptas, cumque quam consectetur iusto perspiciatis voluptatibus voluptatem incidunt recusandae optio, totam eveniet ab consequuntur quod vel nihil maxime esse. Autem impedit laboriosam totam quod debitis deserunt nihil minima earum, porro dignissimos ipsam eius non tempore iste ipsa animi reprehenderit quo eveniet alias, fuga quas sunt illum beatae? Enim, aspernatur vero. Tempora molestias laudantium vel ex nisi neque facilis quas, quam autem velit dignissimos, officia inventore repellendus hic unde eveniet quo. Placeat similique error nemo enim quia, ipsa quis voluptate possimus omnis tempora corporis explicabo! Ad unde iste porro, dicta incidunt placeat perferendis repellat maxime eligendi eveniet impedit saepe id nulla amet cupiditate tempora facilis qui, necessitatibus quam explicabo aspernatur est. Hic quia repellat pariatur velit fuga, sunt aspernatur commodi autem tenetur incidunt ipsum consequatur et recusandae ad unde voluptatum soluta nisi iste. Sunt harum praesentium ipsa? Ab excepturi, iusto, dolore, voluptatibus mollitia quo est nam maxime aperiam eius expedita ullam dolores eum odio quis commodi corrupti nulla ipsa similique voluptatem! Voluptatum magnam ut animi totam sint quas tenetur nihil, velit minus saepe, beatae iste excepturi? Explicabo quos corporis ducimus laborum, aperiam, libero quidem nam reiciendis itaque, tenetur dolorum incidunt minima. Deserunt ut fuga mollitia tempore eum vitae, tempora voluptatem quas recusandae illo unde a nemo necessitatibus doloremque? Vero ea dolor sequi eaque velit asperiores laudantium cupiditate enim suscipit soluta alias quam itaque assumenda a eius minima magni, ullam facere error ex est iste doloribus aliquam? Ratione illo provident, nam maiores velit sequi iure aut omnis quaerat officia, sint enim illum odit impedit autem dolor, adipisci corrupti. Quibusdam maxime fugiat soluta nihil odit sapiente, perferendis adipisci porro accusamus voluptas dolorum aperiam dignissimos laudantium culpa doloribus laboriosam possimus tempora harum? Ratione quod at saepe soluta expedita ab quis! Tenetur repellendus aspernatur natus. Soluta, minus. Quam velit, itaque quis et distinctio dolore magnam sit soluta molestias, unde maxime facere porro ea vitae laudantium quo ratione ut nisi numquam illo tempora beatae officia debitis? Quaerat, earum! Vel perspiciatis harum accusantium expedita quis iusto tempore dolor labore porro corrupti recusandae consequuntur dolorum eius aspernatur numquam obcaecati facilis distinctio quae, delectus eveniet eos voluptatum id nobis aliquam? Debitis sint, omnis ipsa corrupti totam quis reiciendis repudiandae fuga iste perferendis culpa vitae pariatur repellat dolore voluptas vero ut neque nihil natus id nam voluptatum mollitia aperiam! Nobis, rem? Voluptates eligendi, dicta illo expedita quas quae consectetur libero repellat vero provident. Illum iusto rerum error quod, nesciunt voluptate repellat eaque optio magnam blanditiis. Error distinctio, magnam officia, doloribus ab asperiores quidem temporibus iure eligendi pariatur corporis dignissimos reprehenderit possimus perferendis dolorum placeat impedit quasi ex vitae, dolor incidunt eius. Alias impedit ab deserunt magnam iure quae, mollitia atque quasi quidem doloremque illo! Facere non amet, perferendis quas sit omnis odit molestias. Quaerat obcaecati officia, voluptatibus labore fugit vel nisi odio alias tempora eos nostrum, itaque quo illum? Aspernatur eveniet quos adipisci deserunt impedit autem ut velit expedita a nobis minus libero sunt dolores dolorem quis, laboriosam voluptates quae labore. Aspernatur, culpa enim temporibus ea autem facilis. Eaque obcaecati aut inventore enim vitae pariatur et neque veritatis temporibus, labore esse possimus, asperiores in repellendus ullam molestias doloribus tempora atque maxime omnis quidem exercitationem nisi quia quas? Ad, quo? Minus repellat voluptate alias. Delectus magnam itaque molestias ullam illum quia libero vitae, hic laudantium nobis dolor minus debitis, beatae totam esse dolorum, cum voluptate odit. Repudiandae ad quasi, itaque odit quis, porro minima aliquid nostrum nobis autem suscipit rerum velit ut iure labore doloremque vero quidem tempore odio. Eveniet amet cupiditate adipisci iste ullam odit sunt facilis! Ullam sed explicabo reprehenderit deleniti pariatur, suscipit beatae quidem at voluptatibus, maiores ipsam repudiandae, dolore nihil voluptas impedit blanditiis. Eveniet saepe, cupiditate iste possimus illum voluptates, tempora eligendi accusamus, corporis laborum corrupti quasi ullam voluptatibus aperiam rerum sequi quam aspernatur animi ea exercitationem in perspiciatis. Tempora molestiae fugit maiores reprehenderit provident. Libero quasi laborum laboriosam incidunt non ducimus, ab adipisci cum, nesciunt tempora perferendis nemo officia ipsum repellendus.

When you create an element to trigger the drawer, make sure to add the attributedata-drawer-trigger with the id of the element you want to draw

<button data-drawer-trigger="#drawer">Open Drawer</button>

The drawer uses the custom attributes auto-close to enable the user click outside the drawer area to close the drawer, cancel on an element inside the drawer to enable the user close the drawer by clicking the specified element

<div data-drawer id="drawer" auto-close>
    <div class="drawer">
        <section class="drawer-header">
            <span>Edit User</span>
            <span class="u-icon u-icon-24" cancel>multiply</span>
        </section>
        <section class="drawer-content">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime fugiat eum culpa sed quod! Amet at sit deleniti doloremque vitae nesciunt, distinctio nemo nisi ab consequuntur molestiae omnis voluptatum magni fugiat commodi est voluptatibus voluptates in officia accusantium inventore, non ducimus repellat officiis! Odio aperiam, voluptate amet laboriosam quos corporis, qui dolorum modi rerum, possimus adipisci tenetur veritatis illum perferendis aliquid voluptates et repellat animi fuga saepe reprehenderit quasi similique praesentium ut. Illum delectus labore vel iste sit eius atque accusamus veritatis incidunt maiores harum magni fuga a aut quam facere, aliquam impedit recusandae debitis neque minima corporis dolor tenetur. Laudantium veritatis, distinctio corrupti temporibus eaque saepe. Adipisci beatae obcaecati tempora cumque animi in similique ipsa explicabo quasi tenetur porro, quisquam, atque natus! Iste, inventore ut! Molestias quidem aspernatur officia corrupti perferendis sapiente. Iste quibusdam consectetur blanditiis eius impedit! Soluta tenetur consequuntur atque aperiam saepe eveniet nihil quis voluptas. Beatae fugit numquam voluptatum sed, soluta atque voluptatem quidem non consectetur ipsa saepe. Velit consequatur corrupti officia aut animi eum quod quam cum ipsum sed vel dolorum necessitatibus sint fugit tenetur, tempora ea perspiciatis atque repellendus inventore totam quas explicabo dolorem in? Dicta velit alias voluptates illum asperiores aliquam cumque corrupti corporis, sed recusandae, dolor inventore similique et rem doloribus repudiandae! Autem nulla exercitationem nam eum fugit ipsam quos atque doloremque voluptates, sequi animi voluptatem. Aut iste adipisci aliquam voluptatum aspernatur debitis voluptas libero atque minima? Recusandae eveniet non nihil vitae similique, suscipit doloremque voluptatum vel sed cum reprehenderit iure nisi consequuntur quod et illo. Harum praesentium, est, debitis hic voluptatum perspiciatis optio quas voluptate quia, rem laudantium repudiandae? Porro earum dicta omnis vitae impedit expedita temporibus, cumque libero, quam deleniti provident laboriosam, placeat ipsa suscipit molestias vel ut quaerat quos eius perferendis voluptas repellat. Culpa magni voluptas consequuntur in vel quo a quidem temporibus. Corrupti dolores ea cupiditate eaque repudiandae illo reiciendis impedit neque, est tenetur quasi quas quidem placeat aut doloremque porro. Ad deleniti unde nihil harum enim inventore! Dolorum sint quisquam et perspiciatis eos tenetur ipsa voluptatem exercitationem quod reiciendis. Alias exercitationem voluptas, cumque quam consectetur iusto perspiciatis voluptatibus voluptatem incidunt recusandae optio, totam eveniet ab consequuntur quod vel nihil maxime esse. Autem impedit laboriosam totam quod debitis deserunt nihil minima earum, porro dignissimos ipsam eius non tempore iste ipsa animi reprehenderit quo eveniet alias, fuga quas sunt illum beatae? Enim, aspernatur vero. Tempora molestias laudantium vel ex nisi neque facilis quas, quam autem velit dignissimos, officia inventore repellendus hic unde eveniet quo. Placeat similique error nemo enim quia, ipsa quis voluptate possimus omnis tempora corporis explicabo! Ad unde iste porro, dicta incidunt placeat perferendis repellat maxime eligendi eveniet impedit saepe id nulla amet cupiditate tempora facilis qui, necessitatibus quam explicabo aspernatur est. Hic quia repellat pariatur velit fuga, sunt aspernatur commodi autem tenetur incidunt ipsum consequatur et recusandae ad unde voluptatum soluta nisi iste. Sunt harum praesentium ipsa? Ab excepturi, iusto, dolore, voluptatibus mollitia quo est nam maxime aperiam eius expedita ullam dolores eum odio quis commodi corrupti nulla ipsa similique voluptatem! Voluptatum magnam ut animi totam sint quas tenetur nihil, velit minus saepe, beatae iste excepturi? Explicabo quos corporis ducimus laborum, aperiam, libero quidem nam reiciendis itaque, tenetur dolorum incidunt minima. Deserunt ut fuga mollitia tempore eum vitae, tempora voluptatem quas recusandae illo unde a nemo necessitatibus doloremque? Vero ea dolor sequi eaque velit asperiores laudantium cupiditate enim suscipit soluta alias quam itaque assumenda a eius minima magni, ullam facere error ex est iste doloribus aliquam? Ratione illo provident, nam maiores velit sequi iure aut omnis quaerat officia, sint enim illum odit impedit autem dolor, adipisci corrupti. Quibusdam maxime fugiat soluta nihil odit sapiente, perferendis adipisci porro accusamus voluptas dolorum aperiam dignissimos laudantium culpa doloribus laboriosam possimus tempora harum? Ratione quod at saepe soluta expedita ab quis! Tenetur repellendus aspernatur natus. Soluta, minus. Quam velit, itaque quis et distinctio dolore magnam sit soluta molestias, unde maxime facere porro ea vitae laudantium quo ratione ut nisi numquam illo tempora beatae officia debitis? Quaerat, earum! Vel perspiciatis harum accusantium expedita quis iusto tempore dolor labore porro corrupti recusandae consequuntur dolorum eius aspernatur numquam obcaecati facilis distinctio quae, delectus eveniet eos voluptatum id nobis aliquam? Debitis sint, omnis ipsa corrupti totam quis reiciendis repudiandae fuga iste perferendis culpa vitae pariatur repellat dolore voluptas vero ut neque nihil natus id nam voluptatum mollitia aperiam! Nobis, rem? Voluptates eligendi, dicta illo expedita quas quae consectetur libero repellat vero provident. Illum iusto rerum error quod, nesciunt voluptate repellat eaque optio magnam blanditiis. Error distinctio, magnam officia, doloribus ab asperiores quidem temporibus iure eligendi pariatur corporis dignissimos reprehenderit possimus perferendis dolorum placeat impedit quasi ex vitae, dolor incidunt eius. Alias impedit ab deserunt magnam iure quae, mollitia atque quasi quidem doloremque illo! Facere non amet, perferendis quas sit omnis odit molestias. Quaerat obcaecati officia, voluptatibus labore fugit vel nisi odio alias tempora eos nostrum, itaque quo illum? Aspernatur eveniet quos adipisci deserunt impedit autem ut velit expedita a nobis minus libero sunt dolores dolorem quis, laboriosam voluptates quae labore. Aspernatur, culpa enim temporibus ea autem facilis. Eaque obcaecati aut inventore enim vitae pariatur et neque veritatis temporibus, labore esse possimus, asperiores in repellendus ullam molestias doloribus tempora atque maxime omnis quidem exercitationem nisi quia quas? Ad, quo? Minus repellat voluptate alias. Delectus magnam itaque molestias ullam illum quia libero vitae, hic laudantium nobis dolor minus debitis, beatae totam esse dolorum, cum voluptate odit. Repudiandae ad quasi, itaque odit quis, porro minima aliquid nostrum nobis autem suscipit rerum velit ut iure labore doloremque vero quidem tempore odio. Eveniet amet cupiditate adipisci iste ullam odit sunt facilis! Ullam sed explicabo reprehenderit deleniti pariatur, suscipit beatae quidem at voluptatibus, maiores ipsam repudiandae, dolore nihil voluptas impedit blanditiis. Eveniet saepe, cupiditate iste possimus illum voluptates, tempora eligendi accusamus, corporis laborum corrupti quasi ullam voluptatibus aperiam rerum sequi quam aspernatur animi ea exercitationem in perspiciatis. Tempora molestiae fugit maiores reprehenderit provident. Libero quasi laborum laboriosam incidunt non ducimus, ab adipisci cum, nesciunt tempora perferendis nemo officia ipsum repellendus.
        </section>
        <section class="drawer-footer space-between">
            <button cancel class="flat button-small">Cancel</button>
            <div class="flex gap-2">
                <button disabled class="button-small outlined"><span class="u-icon u-icon-16">upload</span>Export</button>
                <button cancel class="button-small"><span class="u-icon u-icon-16">pencil-edit</span>Edit</button>
            </div>
        </section>
    </div>
</div>

NB: In cases where data-drawer-trigger is not available on DOMContentLoaded, you must manually reinitialise the drawer by calling UIhub.services.modalService.reInitModals()

Using the API

See more details on api in installation

UIhub.services.modalService.triggerDrawer("#drawer");

Customisation

[data-drawer] {
  --drawer-header: 60px;
  --drawer-footer: 70px;
  --drawer-background-color: #fff;
  --drawer-width: 600px;
  --drawer-z-index: 1000000;
}

Usage Guidelines