Scrollbar
Custom CSS-styled replacement of browser's default scrollbar.
The custom scrollbar is powered by SimpleBar plugin. To use a custom scrollbar, make sure to include the required reference to the plugin's .css and .js files.
CSS file is linked in the <head> section and above theme.min.css reference in your document:
<link rel="stylesheet" href="assets/vendor/simplebar/dist/simplebar.min.css">JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/simplebar/dist/simplebar.min.js"></script>Vertical
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.
Ad rem error ipsam suscipit? Nobis reiciendis in quae dicta consequuntur itaque, deleniti explicabo eius provident, minus voluptate doloribus porro excepturi saepe! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum debitis accusantium, culpa soluta numquam dolore dolores, nihil explicabo voluptas impedit expedita. Doloribus nulla veniam enim ex.
Fugiat, nisi quidem nulla, ex ipsam voluptatem autem illum labore quaerat deleniti ipsa minima est. Facilis, iste hic cupiditate ea rerum quam? Hic distinctio nostrum temporibus praesentium ipsum modi laudantium eligendi aspernatur eaque explicabo asperiores doloribus nemo in omnis qui, tempora quo molestias maxime inventore ex eaque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.
Amet harum blanditiis eligendi a. Unde consequatur eveniet at cumque minus ab voluptates dolorem architecto! Alias voluptas optio cupiditate facere? Facere, ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia accusamus aliquam temporibus dolorum nobis perspiciatis enim animi dolores corporis, doloremque dolore atque minima reprehenderit dignissimos velit nam doloribus fugit.
<!-- Vertical custom scrollbar example. You can put about any content or component inside <div data-simplebar></div> -->
<div class="overflow-y-auto pe-3" data-simplebar data-simplebar-auto-hide="false" style="max-width: 500px; max-height: 320px;">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.</p>
<p>Ad rem error ipsam suscipit? Nobis reiciendis in quae dicta consequuntur itaque, deleniti explicabo eius provident, minus voluptate doloribus porro excepturi saepe! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum debitis accusantium, culpa soluta numquam dolore dolores, nihil explicabo voluptas impedit expedita. Doloribus nulla veniam enim ex.</p>
<p>Fugiat, nisi quidem nulla, ex ipsam voluptatem autem illum labore quaerat deleniti ipsa minima est. Facilis, iste hic cupiditate ea rerum quam? Hic distinctio nostrum temporibus praesentium ipsum modi laudantium eligendi aspernatur eaque explicabo asperiores doloribus nemo in omnis qui, tempora quo molestias maxime inventore ex eaque.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.</p>
<p>Amet harum blanditiis eligendi a. Unde consequatur eveniet at cumque minus ab voluptates dolorem architecto! Alias voluptas optio cupiditate facere? Facere, ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia accusamus aliquam temporibus dolorum nobis perspiciatis enim animi dolores corporis, doloremque dolore atque minima reprehenderit dignissimos velit nam doloribus fugit.</p>
</div>Horizontal
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<!-- Horizontal custom scrollbar example. You can put about any content or component inside <div data-simplebar></div> -->
<div class="overflow-x-auto pb-4" data-simplebar data-simplebar-auto-hide="false">
<div class="d-flex gap-4">
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="min-width: 230px;">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>Autohide
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.
Ad rem error ipsam suscipit? Nobis reiciendis in quae dicta consequuntur itaque, deleniti explicabo eius provident, minus voluptate doloribus porro excepturi saepe! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum debitis accusantium, culpa soluta numquam dolore dolores, nihil explicabo voluptas impedit expedita. Doloribus nulla veniam enim ex.
Fugiat, nisi quidem nulla, ex ipsam voluptatem autem illum labore quaerat deleniti ipsa minima est. Facilis, iste hic cupiditate ea rerum quam? Hic distinctio nostrum temporibus praesentium ipsum modi laudantium eligendi aspernatur eaque explicabo asperiores doloribus nemo in omnis qui, tempora quo molestias maxime inventore ex eaque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.
Amet harum blanditiis eligendi a. Unde consequatur eveniet at cumque minus ab voluptates dolorem architecto! Alias voluptas optio cupiditate facere? Facere, ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia accusamus aliquam temporibus dolorum nobis perspiciatis enim animi dolores corporis, doloremque dolore atque minima reprehenderit dignissimos velit nam doloribus fugit.
<!-- Remove data-simplebar-auto-hide="false" from data-simplebar to enable autohide feature (scrollbar will be shown on hover). You can put about any content or component inside <div data-simplebar></div> -->
<div class="overflow-y-auto pe-3" data-simplebar style="max-width: 500px; max-height: 320px;">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.</p>
<p>Ad rem error ipsam suscipit? Nobis reiciendis in quae dicta consequuntur itaque, deleniti explicabo eius provident, minus voluptate doloribus porro excepturi saepe! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum debitis accusantium, culpa soluta numquam dolore dolores, nihil explicabo voluptas impedit expedita. Doloribus nulla veniam enim ex.</p>
<p>Fugiat, nisi quidem nulla, ex ipsam voluptatem autem illum labore quaerat deleniti ipsa minima est. Facilis, iste hic cupiditate ea rerum quam? Hic distinctio nostrum temporibus praesentium ipsum modi laudantium eligendi aspernatur eaque explicabo asperiores doloribus nemo in omnis qui, tempora quo molestias maxime inventore ex eaque.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, autem aliquid nisi quia, deserunt atque alias amet totam temp aspernatur facilis veritatis repellendus tenetur, inventore ex eaque non omnis nostrum! Optio, earum illum unde dolorum illo quasi laboriosam quod alias nesciunt similique qui voluptatibus cupid dolor molestias omnis aliquid fuga pariatur fugiat.</p>
<p>Amet harum blanditiis eligendi a. Unde consequatur eveniet at cumque minus ab voluptates dolorem architecto! Alias voluptas optio cupiditate facere? Facere, ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia accusamus aliquam temporibus dolorum nobis perspiciatis enim animi dolores corporis, doloremque dolore atque minima reprehenderit dignissimos velit nam doloribus fugit.</p>
</div>