Responsive Patterns

<style>
  .responsive-tabs {
    overflow: hidden;
    resize: horizontal;
    border: 1px solid #ccc;
    max-width: 600px;
    min-width: 240px;
  }
</style>
<div class="responsive-tabs" nve-layout="pad:md">
  <nve-tabs behavior-select>
    <nve-tabs-item selected>Tab 1</nve-tabs-item>
    <nve-tabs-item>Tab 2</nve-tabs-item>
    <nve-tabs-item>Tab 3</nve-tabs-item>
    <nve-tabs-item nve-display="&sm|hide">Tab 4</nve-tabs-item>
    <nve-tabs-item nve-display="&sm|hide">Tab 5</nve-tabs-item>
    <nve-tabs-item nve-display="&sm|hide">Tab 6</nve-tabs-item>
    <nve-tabs-item popovertarget="more-tabs" nve-display="&sm|show">
      <nve-icon name="more-actions"></nve-icon>
    </nve-tabs-item>
  </nve-tabs>
  <nve-dropdown id="more-tabs">
    <nve-menu>
      <nve-menu-item>Tab 4</nve-menu-item>
      <nve-menu-item>Tab 5</nve-menu-item>
      <nve-menu-item>Tab 6</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
</div>
<p nve-text="body">Resize the container to see tabs hide and the "more" menu appear on smaller container sizes.</p>

<style>
  .responsive-toolbar {
    overflow: hidden;
    resize: horizontal;
    border: 1px solid #ccc;
    max-width: 700px;
    min-width: 260px;
  }
</style>
<div class="responsive-toolbar" nve-layout="pad:md">
  <nve-toolbar>
    <nve-search>
      <input type="search" placeholder="Search..." aria-label="Search" />
    </nve-search>
    <nve-button container="flat" slot="suffix"> <nve-icon name="filter"></nve-icon> Filter </nve-button>
    <nve-button container="flat" slot="suffix" nve-display="&md|hide">
      <nve-icon name="sort-ascending"></nve-icon> Sort
    </nve-button>
    <nve-button container="flat" slot="suffix" nve-display="&md|hide">
      <nve-icon name="download"></nve-icon> Export
    </nve-button>
    <nve-icon-button
      container="flat"
      slot="suffix"
      icon-name="gear"
      aria-label="Settings"
      nve-display="&md|hide"
    ></nve-icon-button>
    <nve-icon-button
      container="flat"
      slot="suffix"
      icon-name="more-actions"
      aria-label="More actions"
      popovertarget="toolbar-more-actions"
      nve-display="&md|show"
    ></nve-icon-button>
  </nve-toolbar>
  <nve-dropdown id="toolbar-more-actions">
    <nve-menu>
      <nve-menu-item> <nve-icon name="sort-ascending"></nve-icon> Sort </nve-menu-item>
      <nve-menu-item> <nve-icon name="download"></nve-icon> Export </nve-menu-item>
      <nve-menu-item> <nve-icon name="gear"></nve-icon> Settings </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
</div>
<p nve-text="body">
  Resize the container to see toolbar actions collapse into the "more actions" menu on smaller container sizes.
</p>