Sitemap
v0.0.0
The Sitemap component shows a list of all pages of the website.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--hgap-30">
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
kombucha
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
DIY tilde
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
whatever meggings mumblecore iPhone
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
DIY gentrify
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
ramps literally vinyl ennui
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tofu vinegar pug vegan
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
street hoodie
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
offal forage keffiyeh authentic
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
readymade
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
locavore sriracha cliche keytar
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
+1
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
bitters Godard wayfarers poutine
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
forage keffiyeh locavore
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
master
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
mixtape XOXO DIY fingerstache
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
bitters 8-bit cold-pressed narwhal
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
actually
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
heirloom VHS yr
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
humblebrag brooklyn
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
sriracha aesthetic everyday
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
seitan celiac intelligentsia
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
seitan park authentic scenester
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tumblr park intelligentsia distillery
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
gentrify wolf phlogiston chartreuse
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
wayfarers locavore sartorial
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
semiotics kogi chia
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
whatever
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
carry
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
truffaut farm-to-table street
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
bushwick intelligentsia marfa
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
phlogiston carry flexitarian
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
poutine vegan
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
squid schlitz hoodie roof
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
listicle tacos
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
XOXO ennui quinoa tattooed
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
post-ironic slow-carb echo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
venmo typewriter whatever selvage
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
chartreuse
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
meh quinoa mumblecore
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
Yuccie fingerstache meh
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--locked" href="#">
viral stumptown
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
mlkshk authentic
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
pitchfork polaroid chillwave
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
mumblecore cold-pressed
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
sartorial
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
heirloom
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
letterpress street roof
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
typewriter vinyl
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
artisan synth distillery
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
polaroid wolf pinterest Thundercats
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
schlitz leggings banjo
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
neutra brunch listicle squid
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
portland whatever vice goth
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tumblr Godard
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
gluten-free sartorial aesthetic
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
vinyl normcore carry typewriter
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
fixie ennui sriracha
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
kitsch vegan pabst
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
banjo stumptown tumblr chambray
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
schlitz quinoa
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
distillery locavore +1
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
cray lomo try-hard hella
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
sriracha slow-carb microdosing bitters
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
plaid
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
humblebrag
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chartreuse
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
Godard mlkshk post-ironic sustainable
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
retro +1
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
Thundercats
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
drinking
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
echo readymade chia
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
brooklyn vegan twee
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
slow-carb vice kinfolk schlitz
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
waistcoat
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
kickstarter vinyl selvage mumblecore
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
authentic echo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
salvia
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
pitchfork
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
truffaut dreamcatcher
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
kombucha
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
listicle normcore mlkshk
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chartreuse poutine health
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
helvetica
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
listicle cornhole ramps schlitz
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
pitchfork 8-bit occupy vegan
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
Thundercats letterpress quinoa
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
taxidermy mlkshk cliche
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
kitsch actually
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tattooed
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
readymade kickstarter
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
church-key fingerstache pickled
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
chambray etsy slow-carb everyday
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
lo-fi franzen scenester celiac
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
VHS
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chillwave authentic skateboard
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
artisan fixie pinterest kombucha
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
mustache knausgaard artisan
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
hoodie
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
chartreuse retro tilde
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
poutine street PBR&B
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheet is required to display this component.
The following additional stylesheets are used to display the example(s).
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Added
- 23 Nov 2023 - Add locked icon variant
- 28 June 2022 - Initial draft
Changed
- 07 Nov 2023 - Header are links now.