Commodi veniam non perferendis
<!-- block header -->
<div class="block-header">
<!-- breadcrumb -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#">Report</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
<!-- breadcrumb -->
<!-- block header container -->
<div class="block-header-container">
<div class="block-header-primary">
<h5 class="block-header-title">Block header</h5>
<p class="block-header-subtitle">Commodi veniam non perferendis</p>
</div>
<div class="block-header-secondary">
<!-- action menu -->
<nav class="action-menu">
<ul class="action-menu-list">
<li class="action-menu-item">
<a href="#" class="action-menu-link">
<i class="iconoir-settings action-menu-icon"></i>
<span class="action-menu-label">Settings</span>
</a>
</li>
<li class="action-menu-item">
<a href="#" class="action-menu-link">
<i class="iconoir-plus-square action-menu-icon"></i>
<span class="action-menu-label">Add new</span>
</a>
</li>
<li class="action-menu-item action-menu-item-highlight">
<a href="#" class="action-menu-link">
<i class="iconoir-trash action-menu-icon"></i>
<span class="action-menu-label">Delete</span>
</a>
</li>
<li class="action-menu-item">
<a href="#" class="action-menu-link">
<i class="iconoir-download action-menu-icon"></i>
<span class="action-menu-label">Download Long Text Long Text</span>
</a>
</li>
</ul>
</nav>
<!-- action menu -->
</div>
</div>
<!-- block header container -->
</div>
<!-- block header -->
Use action-menu-primary
class for different action menu where icons are top and labels are bottom
Commodi veniam non perferendis
<!-- block header -->
<div class="block-header">
<!-- breadcrumb -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#">Report</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
<!-- breadcrumb -->
<!-- block header container -->
<div class="block-header-container">
<div class="block-header-primary">
<h5 class="block-header-title">Block header</h5>
<p class="block-header-subtitle">Commodi veniam non perferendis</p>
</div>
<div class="block-header-secondary">
<!-- action menu -->
<nav class="action-menu action-menu-primary">
<ul class="action-menu-list">
<li class="action-menu-item">
<a href="#" class="action-menu-link">
<i class="iconoir-settings action-menu-icon"></i>
<span class="action-menu-label">Settings</span>
</a>
</li>
<li class="action-menu-item">
<a href="#" class="action-menu-link">
<i class="iconoir-plus-square action-menu-icon"></i>
<span class="action-menu-label">Add new</span>
</a>
</li>
<li class="action-menu-item action-menu-item-highlight">
<a href="#" class="action-menu-link">
<i class="iconoir-trash action-menu-icon"></i>
<span class="action-menu-label">Delete</span>
</a>
</li>
<li class="action-menu-item">
<a href="#" class="action-menu-link">
<i class="iconoir-download action-menu-icon"></i>
<span class="action-menu-label">Download Long Text Long Text</span>
</a>
</li>
</ul>
</nav>
<!-- action menu -->
</div>
</div>
<!-- block header container -->
</div>
<!-- block header -->