Header

Block header

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 -->
Different action menu

Use action-menu-primary class for different action menu where icons are top and labels are bottom

Block header

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 -->