<div class="smartbar">
    <ul>
        <li>
            <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
        </li>
        <li>
            <a href="/options" class="tab-active"><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
        </li>
        <li class="smartbar-end">
            <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
        </li>
    </ul>
    <div class="tab-content">
        <section class="tab-panel" role="tabpanel" class="active" aria-hidden="false">
            <ul class="smartbar-filters">
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="tab-active">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
                <li>
                    <a href="?filter=article" class="">Article</a>
                </li>
            </ul>
            <div class="smartbar-actions">
                <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg> Add</a>
                <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg> Clear</a>
            </div>
        </section>

    </div>
</div>
<div class="smartbar">
	<ul>
		<li>
			{{ render '@smartbar-tab--default' }}
		</li>
		<li>
			{{ render '@smartbar-tab--active' }}
		</li>
		<li class="smartbar-end">
			{{ render '@smartbar-tab--default' }}
		</li>
	</ul>
	<div class="tab-content">
		{{ render '@smartbar-filter--default' }}
	</div>
</div>
/* No context defined for this component. */
  • Content:
    .tab-content .tab-panel {
      background-color: #fff;
      padding: .5rem .5rem .5rem 0;
    }
    
    .tab-content .tab-panel.hidden {
      display: none;
    }
    
    .smartbar .smartbar-filters {
      flex-wrap: wrap;
    }
    
    .smartbar.with-panels .smartbar-filters {
      border-bottom: 0;
    }
    
    .smartbar-actions {
      margin: 0 .5em;
      padding: 0 0 .5em 0;
      white-space: nowrap;
    }
    
    .smartbar-actions a svg {
      margin-right: 0;
      padding-left: 0;
      vertical-align: text-top;
      fill: palette(type, dark);
      fill: #fff;
    }
    
    .smartbar-actions a:link,
    .smartbar-actions a:visited {
      padding: 0.1em 0.5em;
      @include font-scale(sm, helvetica);
      background-color: palette(ui, darker);
      color: #fff; //palette(type, light);
      vertical-align: top;
      border-radius: .5em;
    }
    
    .smartbar-actions a:hover,
    .smartbar-actions a:active {
      background-color: palette(ui, dark);
      color: #fff; 
    }
    
    @include media(">bp-s") {
      .tab-content .tab-panel {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: .5rem .5rem 0 0;
      }
    
      .smartbar-actions {
        margin: 0 0 0 auto;
      }
    }
    
    .smartbar .tab-content li {
      border: 0;
    }
    
    .smartbar .tab-content li a:link,
    .smartbar .tab-content li a:visited {
      padding: 0.1em 1em;
      margin: 0 0 .5rem .5rem;
      border-radius: .5em;
      background-color: palette(ui, lighter);
      color: palette(type, base);
    }
    
    .smartbar .tab-content li a.tab-active:link,
    .smartbar .tab-content li a.tab-active:visited {
      background-color: palette(ui, primary);
      color: #fff;
      border-bottom: 0;
    }
    
    .smartbar .tab-content li a:hover,
    .smartbar .tab-content li a:active {
      background-color: palette(ui, base);
      color: palette(type, dark);
    }
    
  • URL: /components/raw/filtered-smartbar/filtered-smartbar.scss
  • Filesystem Path: src/components/13-navigation/04-smartbar/03-organisms/02-filtered-smartbar/filtered-smartbar.scss
  • Size: 1.6 KB

In this version, the second tab is active, as it currently show.

The second row are sub options for the active tab. Background should be white to merge with the active tab above, so we need a different active style. I wonder if these should be little ‘pills’ in bar rather than another level of pure tabs.

Finder search bar

The clear button would appear when a second row item is active, so that the listing on the page is showing in a filtered state. The clear button clears the filter. It should probably be over on the right.