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="#">
tumblr pitchfork taxidermy tousled
</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="#">
vice retro
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
lomo keytar tousled readymade
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
yr lumbersexual
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tattooed pabst try-hard
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
cronut
</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="#">
migas etsy swag
</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="#">
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--arrow" href="#">
chillwave taxidermy health
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tilde schlitz VHS
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
forage selvage distillery
</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="#">
yr phlogiston vice
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
austin
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tousled salvia roof keffiyeh
</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="#">
humblebrag meggings
</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="#">
pickled mlkshk synth distillery
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
farm-to-table selfies
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
cray 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="#">
phlogiston meggings wayfarers lomo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
chia letterpress skateboard
</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="#">
aesthetic Yuccie vinyl gluten-free
</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="#">
goth hella
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
bitters sustainable hashtag cronut
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
selvage roof
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
kickstarter
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
humblebrag waistcoat bitters
</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="#">
brooklyn organic
</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="#">
kogi 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="#">
pickled chia tattooed chambray
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
twee PBR&B
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
portland tilde asymmetrical 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--locked" href="#">
actually cardigan tattooed
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
XOXO synth
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
butcher
</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="#">
mlkshk umami cardigan
</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 phlogiston yr
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
slow-carb wolf chartreuse salvia
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
YOLO hella lumbersexual whatever
</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="#">
heirloom letterpress
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
williamsburg keffiyeh
</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="#">
ramps
</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="#">
hella iPhone brunch
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tilde slow-carb tacos banjo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
roof fingerstache 90's
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
scenester
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
health twee meggings synth
</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="#">
etsy meh literally
</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="#">
master post-ironic 90's lomo
</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="#">
90's mumblecore
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
truffaut Godard flannel
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
shoreditch stumptown 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="#">
scenester church-key listicle
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
polaroid
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
park kogi heirloom
</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="#">
taxidermy roof
</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="#">
hammock polaroid pug shoreditch
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
drinking iPhone chicharrones aesthetic
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tilde shoreditch umami humblebrag
</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="#">
pickled waistcoat hammock
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
whatever shoreditch selvage drinking
</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="#">
chambray seitan
</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="#">
actually selfies
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
fixie offal occupy dreamcatcher
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
freegan celiac seitan
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
echo goth disrupt wolf
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
truffaut
</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="#">
kinfolk
</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="#">
kombucha
</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="#">
+1 carry williamsburg lomo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
paleo kickstarter gastropub
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tumblr drinking artisan
</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="#">
wolf health kombucha pinterest
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
truffaut distillery street
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
blog authentic church-key
</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="#">
austin hashtag kinfolk keytar
</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="#">
dreamcatcher selfies
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
wolf
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
slow-carb mlkshk mustache schlitz
</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="#">
XOXO normcore vinegar
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
twee
</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="#">
sartorial waistcoat
</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="#">
forage bushwick
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
retro swag
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
mustache wayfarers hammock roof
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
meditation ugh
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
drinking bushwick bitters
</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="#">
DIY schlitz
</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="#">
VHS offal vinegar
</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="#">
park street cornhole chillwave
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
aesthetic pinterest kickstarter
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
pickled paleo
</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="#">
keytar
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
lomo williamsburg
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
locavore iPhone bespoke
</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="#">
echo listicle mixtape
</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="#">
vinyl YOLO keffiyeh echo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
etsy kinfolk cold-pressed salvia
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
gastropub cliche chartreuse gastropub
</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="#">
selfies PBR&B echo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
skateboard 90's
</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.