Toolbar

Toolbar allows you to stack navigation links in a block.

Basic example

Check the basic example of toolbars. Using the wrapper class of .hk-toolbar.

Preview
HTML

														
<div class="row">
<div class="col-sm-4">
	<div class="hk-toolbar border pa-10 mb-3">
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Dark mode"><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Settings"><span class="icon"><span class="feather-icon"><i data-feather="settings"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Archive"><span class="icon"><span class="feather-icon"><i data-feather="archive"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Help"><span class="icon"><span class="feather-icon"><i data-feather="check-square"></i></span></span></a>
			</li>
		</ul>
	</div>
</div>
<div class="col-sm-4">
	<div class="hk-toolbar border pa-10 mb-3">
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Dark mode"><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Settings"><span class="icon"><span class="feather-icon"><i data-feather="settings"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Archive"><span class="icon"><span class="feather-icon"><i data-feather="archive"></i></span></span></a>
			</li>
		</ul>
	</div>
</div>
</div>

Toolbar asymmetric

Add class .toolbar-asymmetric with .hk-toolbar for asymmetric toolbar.

Preview
HTML

														
<div class="row">
<div class="col-sm-4">
	<div class="hk-toolbar toolbar-asymmetric border pa-10 mb-3">
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Dark mode"><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Settings"><span class="icon"><span class="feather-icon"><i data-feather="settings"></i></span></span></a>
			</li>
		</ul>
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Archive"><span class="icon"><span class="feather-icon"><i data-feather="archive"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Help"><span class="icon"><span class="feather-icon"><i data-feather="check-square"></i></span></span></a>
			</li>
		</ul>
	</div>
</div>
<div class="col-sm-4">
	<div class="hk-toolbar toolbar-asymmetric border pa-10 mb-3">
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Dark mode"><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Settings"><span class="icon"><span class="feather-icon"><i data-feather="settings"></i></span></span></a>
			</li>
		</ul>
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Help"><span class="icon"><span class="feather-icon"><i data-feather="check-square"></i></span></span></a>
			</li>
		</ul>
	</div>
</div>
<div class="col-sm-4">
	<div class="hk-toolbar toolbar-asymmetric border pa-10 mb-3">
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Dark mode"><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></a>
			</li>
		</ul>
		<ul class="nav nav-light">
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Help"><span class="icon"><span class="feather-icon"><i data-feather="check-square"></i></span></span></a>
			</li>
			<li class="nav-item nav-link">
				<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Settings"><span class="icon"><span class="feather-icon"><i data-feather="settings"></i></span></span></a>
			</li>
		</ul>
	</div>
</div>
</div>

Basic example
Toolbar asymmetric