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
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
yr lumbersexual farm-to-table
</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 scenester gastropub
</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
</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 hoodie everyday
</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
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
forage 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--locked" href="#">
yr phlogiston vice kombucha
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
austin sustainable
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chillwave flannel hashtag intelligentsia
</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="#">
fingerstache schlitz bespoke dreamcatcher
</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 mlkshk
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
farm-to-table
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
cray gluten-free truffaut migas
</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
</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 beard
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
brooklyn sustainable
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
selvage
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
Yuccie
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
williamsburg
</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="#">
austin echo echo banjo
</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="#">
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--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 quinoa chartreuse
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
portland tilde
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
XOXO
</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 YOLO
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
williamsburg keffiyeh distillery seitan
</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 viral
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tilde slow-carb
</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 gastropub readymade cleanse
</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 chartreuse
</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
</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 neutra
</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 microdosing
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
polaroid authentic marfa
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
park
</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
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
brooklyn ennui
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
whatever shoreditch selvage
</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 whatever
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
fixie
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
freegan gluten-free
</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 meggings normcore artisan
</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 squid
</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 DIY williamsburg ramps
</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 cleanse
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tumblr drinking
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
truffaut distillery street seitan
</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
</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 organic
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
slow-carb mlkshk mustache
</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 shoreditch cred
</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 disrupt
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
retro swag quinoa
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
mustache wayfarers hammock
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
meditation
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
drinking
</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
</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 umami
</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
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
bespoke
</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 health Thundercats
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
cardigan Thundercats swag pour-over
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
locavore 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="#">
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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
etsy kinfolk cold-pressed
</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
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
skateboard 90's freegan
</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.