NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Bottom sheet met filters New

Mobile bottom sheet for filters: drag the handle (pointer events with velocity) to half or full, or down to close. The handle is also a button (Enter, arrow up/down), Esc closes, focus stays inside and returns afterwards. The result count updates live and shows an empty state. Built on

; contained in the tile for the demo, showModal() on a real site.

Kappers in Rotterdam48 resultaten
  • Salon NoordBergweg 112 · 1,2 km8,9
  • Kapsalon KralingenOudedijk 40 · 2,0 km9,2
  • Barbier aan de MaasMaasboulevard 7 · 2,6 km8,4
  • Haarwerk DelfshavenSchiedamseweg 88 · 3,1 km8,7

Filters

Sorteer op
Open op
Prijs knippen

How to use it

  1. Paste the HTML where the navigation & menus should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Bottom sheet met filters · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bsh">
  <div class="bsh__app">
    <div class="bsh__top"><div><span class="bsh__eyebrow">Kappers in Rotterdam</span><strong class="bsh__count"><span>48</span> resultaten</strong></div><button class="bsh__open" type="button" aria-haspopup="dialog">Filters <span class="bsh__fc">0</span></button></div>
    <ul class="bsh__res">
      <li><b>Salon Noord</b><span>Bergweg 112 · 1,2 km</span><em>8,9</em></li>
      <li><b>Kapsalon Kralingen</b><span>Oudedijk 40 · 2,0 km</span><em>9,2</em></li>
      <li><b>Barbier aan de Maas</b><span>Maasboulevard 7 · 2,6 km</span><em>8,4</em></li>
      <li><b>Haarwerk Delfshaven</b><span>Schiedamseweg 88 · 3,1 km</span><em>8,7</em></li>
    </ul>
  </div>
  <div class="bsh__scrim"></div>
  <dialog class="bsh__sheet" aria-labelledby="bsh-h">
    <div class="bsh__grip"><button class="bsh__handle" type="button" aria-label="Paneel vergroten"><span></span></button></div>
    <div class="bsh__head"><h3 id="bsh-h" class="bsh__h">Filters</h3><button class="bsh__clear" type="button">Wis alles</button><button class="bsh__x" type="button" aria-label="Sluit filters"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
    <div class="bsh__body">
      <fieldset class="bsh__fs"><legend>Sorteer op</legend><div class="bsh__seg">
        <label><input type="radio" name="bsh-s" value="a" checked><span>Afstand</span></label>
        <label><input type="radio" name="bsh-s" value="b"><span>Cijfer</span></label>
        <label><input type="radio" name="bsh-s" value="c"><span>Prijs</span></label></div></fieldset>
      <fieldset class="bsh__fs"><legend>Open op</legend><div class="bsh__chips">
        <label><input type="checkbox" data-f=".75"><span>Zaterdag</span></label>
        <label><input type="checkbox" data-f=".5" data-k="avond"><span>Avond na 18:00</span></label>
        <label><input type="checkbox" data-f=".25" data-k="zondag"><span>Zondag</span></label></div></fieldset>
      <fieldset class="bsh__fs"><legend>Prijs knippen</legend><div class="bsh__chips" data-or="1">
        <label><input type="checkbox" data-f=".45"><span>Tot € 25</span></label>
        <label><input type="checkbox" data-f=".5"><span>€ 25 tot € 40</span></label>
        <label><input type="checkbox" data-f=".3"><span>Vanaf € 40</span></label></div></fieldset>
      <label class="bsh__sw"><span>Alleen cijfer 8 of hoger</span><input type="checkbox" role="switch" data-f=".6"></label>
    </div>
    <div class="bsh__foot"><button class="bsh__apply" type="button">Toon 48 resultaten</button></div>
  </dialog>
</div>
</div>

More navigation & menus

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →