App Layout Issue with <vaadin-drawer>

Hello everyone! Having some trouble with the App Layout not showing the hamburger icon, I believe i’ve imported all the correct @vaadin/ components. Here is my LitElement code.

Rebuilt my webpack config from scratch just to rule out everything, however, this hamburger icon refuses to show up. Maybe i’m missing a particular component import statement.

HTML – calling my custom component
index.html :

  <h1><%= htmlWebpackPlugin.options.title %></h1>


import { html, LitElement } from 'lit-element';
import { navViewStyles } from '../styles/base-styles';
import '@vaadin/vaadin-app-layout';
import '@vaadin/vaadin-tabs';
import '@vaadin/vaadin-icons';
import '@vaadin/vaadin-button';

class BootstrapNav extends LitElement{
  //static get styles() {
  //  return [ navViewStyles]
  render() {
    return html` 
    <style include="lumo-typography lumo-color">
      iron-icon {
        padding: 0.25em;
        width: var(--lumo-icon-size-s);
        height: var(--lumo-icon-size-s);
      <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
      <h2 slot="navbar">App Name</h2>
      <vaadin-tabs orientation="vertical" slot="drawer">
          <a href="/">
            <iron-icon icon="vaadin:home"></iron-icon>
            Page 1
          <a href="page2">
            <iron-icon icon="vaadin:list"></iron-icon>
            Page 2
          <a href="page3">
            <iron-icon icon="vaadin:options"></iron-icon>
            Page 3


Screen shot of component.

Hello, you need to also import vaadin-drawer-toggle separately:

import '@vaadin/vaadin-app-layout/vaadin-drawer-toggle.js';

I’m not 100% sure what the import '@vaadin/vaadin-app-layout'; import statement actually imports. I’m assuming you might be missing the import for the vaadin-drawer-toggle element.

Edit: Serhii, beat me to it :slight_smile: