< nav class = "site-nav" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm site-nav__content" >
< a class = "site-nav__logo" href = "{{ site.baseurl }}/" >
< svg viewBox = "0 0 32 32" xmlns = "http://www.w3.org/2000/svg" fill-rule = "evenodd" clip-rule = "evenodd" stroke-linejoin = "round" stroke-miterlimit = "1.414" >
< title > Shuffle.js logo< / title >
< rect x = "2" y = "2" width = "8" height = "18" fill = "#2dcb71" / >
< rect x = "12" y = "2" width = "8" height = "8" fill = "#9b59b5" / >
< rect x = "22" y = "2" width = "8" height = "12" fill = "#f39b11" / >
< rect x = "2" y = "22" width = "8" height = "8" fill = "#e74b3b" / >
< rect x = "12" y = "12" width = "8" height = "8" fill = "#3397db" / >
< rect x = "22" y = "16" width = "8" height = "4" fill = "#1abb9b" / >
< rect x = "12" y = "22" width = "18" height = "8" fill = "#33495d" / >
< / svg >
< span class = "site-nav__name" > Shuffle.js< / span >
< / a >
< div class = "site-nav__links" >
< div class = "site-nav__link site-nav__link--dropdown" >
< button class = "site-nav__link-toggle btn" id = "docs-dropdown-btn" aria-label = "Click to reveal list of Shuffle demos" aria-haspopup = "true" aria-controls = "docs-dropdown" aria-expanded = "false" > Docs< / button >
< div class = "site-nav__dropdown site-nav__dropdown--simple-links" id = "docs-dropdown" aria-labelledby = "docs-dropdown-btn" >
< ol class = "unstyled" >
< li > < a href = "{{ site.baseurl }}/#install" > Install< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#features" > Features< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#options" > Options< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#usage" > Usage< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#filters" > Filters< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#advanced-filters" > Advanced Filters< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#sorting" > Sorting< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#events" > Events< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#adding-removing" > Adding and Removing Items< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#public-methods" > Public Methods< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#custom-styles" > Custom Styles< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#dependencies" > Dependencies< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#supported-browsers" > Supported Browsers< / a > < / li >
< li > < a href = "{{ site.baseurl }}/#changelog" > Changelog< / a > < / li >
< / ol >
< / div >
< / div >
< div class = "site-nav__link site-nav__link--dropdown" >
< button class = "site-nav__link-toggle btn" id = "demos-dropdown-btn" aria-label = "Click to reveal list of Shuffle demos" aria-haspopup = "true" aria-controls = "demos-dropdown" aria-expanded = "false" > Demos< / button >
< div class = "site-nav__dropdown" id = "demos-dropdown" aria-labelledby = "demos-dropdown-btn" >
< ul class = "unstyled" >
{% for post in site.data.demos %}
< li class = "" >
{% if post.external %}
< a href = "{{ post.url }}" target = "_blank" rel = "noopener" >
{% else %}
< a href = "{{ site.baseurl }}/{{ post.slug }}" >
{% endif %}
< figure >
< picture >
< source srcset = "{{ site.baseurl }}/img/demos/{{ post.slug }}.webp" type = "image/webp" >
< img src = "{{ site.baseurl }}/img/demos/{{ post.slug }}.jpg" alt = "{{ post.label }}" >
< / picture >
< figcaption > {{ post.label }}< / figcaption >
< / figure >
< / a >
< / li >
{% endfor %}
< / ul >
< / div >
< / div >
< a class = "site-nav__link hidden@xs" href = "{{ site.baseurl }}/faq" > FAQ< / a >
< a class = "site-nav__link hidden@xs" href = "https://github.com/Vestride/Shuffle" >
< img class = "site-nav__link-img" src = "{{ site.baseurl }}/img/github.svg" alt = "View Shuffle on GitHub" title = "" width = "16" height = "16" >
< / a >
< / div >
< / div >
< / div >
< / div >
< / nav >