DEV Community


A simple OffCanvas webComponent

・1 min read

There are dozens libraries to create custom elements.
For this demo, I have choosen uce.

If you have any questions or suggestions, feel free to comment.

Here, I have defined two custom elements:

  • my-sidebar
  • my-link

Here is how they ared used in an html page :

<div class="topbar">
    <my-link label='Google' target=""></my-link>
  <div style="text-align:center">
    Custom side bar with uce
Enter fullscreen mode Exit fullscreen mode

The JS part :

const {html, define, render} = uce

 define("my-sidebar", {
    init() {
      this.width = this.getAttribute("width") || 250
      this.links = Array
        .map(l => ({
          label: l.getAttribute("label"),
          target: l.getAttribute("target")
    render() {
        <div id="mySidenav" class="sidenav">
          <a class=${`closebtn `} onclick=${()=> this.closeNav()}>X</a>
          <div style='border-bottom:1px solid grey;position:relative;top:-11px'></div>
          ${ => html`<a href="${}">${l.label}</a>`)}
        <span style="font-size:30px;cursor:pointer" onclick=${()=> this.openNav()}>&#9776</span>
    openNav() {
      (mySidenav).style.width = "250px"
    closeNav() {
      (mySidenav).style.width = "0px"

  define("my-link", {})

Enter fullscreen mode Exit fullscreen mode

You can test it here : UceOffCanvas

Discussion (0)

Forem Open with the Forem app