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 bushwick aesthetic
</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 retro pug
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
whatever meggings
</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
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
ramps brunch
</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 YOLO pour-over
</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="#">
street
</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 mlkshk umami echo
</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 seitan
</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
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
master readymade crucifix
</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
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
poutine ramps cliche XOXO
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
gluten-free
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
sriracha
</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
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tumblr
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
gentrify
</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
</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 blog phlogiston iPhone
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
bushwick intelligentsia marfa bespoke
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
bespoke 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--locked" href="#">
poutine
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
squid
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
listicle tacos everyday farm-to-table
</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
</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
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
chartreuse try-hard typewriter
</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 pug
</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 bespoke
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
gastropub 8-bit
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
mumblecore
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
sartorial portland
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
heirloom umami readymade
</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 brooklyn leggings
</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 pitchfork
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
polaroid wolf pinterest
</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
</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
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
fixie
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
kitsch vegan pabst brooklyn
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
schlitz YOLO
</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
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
ugh biodiesel gentrify squid
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
vinegar park
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
wayfarers
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
kogi
</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
</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 cleanse
</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 offal
</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 salvia
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
slow-carb vice kinfolk
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
waistcoat meggings 90's
</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
</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 poutine
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
salvia tilde
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
pitchfork squid gastropub scenester
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
kombucha neutra cleanse
</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 forage
</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 cold-pressed
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
helvetica cold-pressed yr
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
listicle cornhole ramps
</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
</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
</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 williamsburg
</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 distillery
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
readymade
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
church-key fingerstache 90's
</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="#">
bespoke
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
lo-fi franzen scenester
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
VHS brooklyn lomo mumblecore
</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 church-key
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
mustache knausgaard
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
poutine
</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.