title: Interior Left Nav
body: <p>I'm using this package.
  <a href="http://carbondesignsystem.com/components/interior-left-nav/code" rel="nofollow noreferrer">http://carbondesignsystem.com/components/interior-left-nav/code</a></p>
  
  <p>Do you have any idea to fix this problem?
  I want "Nav" to be closed on blur event.</p>
  
  <p>My Question is as below.</p>
  
  <p><img src="https://i.stack.imgur.com/6v2BQ.gif" alt="Question"></p>
  
  <p><strong>My Code.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav role="navigation" aria-label="Interior Left Navigation" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable"&gt;
    &lt;ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-hidden="false"&gt;
      &lt;li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item&gt;
        &lt;a class="left-nav-list__item-link"&gt;
          Example Item 1
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse&gt;
      &lt;a class="bx--interior-left-nav-collapse__link" href="#"&gt;
        &lt;svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd"&gt;
          &lt;path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"&gt;&lt;/path&gt;
        &lt;/svg&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>