PatternLab (0.1.259)

# Action Menu

# CSS Only

.c-btn.-icon-btn[.-inverted, .-link, .-secondary...]
+
.c-action-menu[.h-float-right,... ] > .c-action-menu__row[.-last] > .c-action-menu__dropdown
1
2
3
hide code 
<div class="c-action-menu h-flex h-flex-row h-end">
    <div class="c-action-menu__row">
        <div class="c-action-menu__dropdown">
            <button type="button" class="c-btn -icon-btn -small -redesign -link"><i class="fa fa-ellipsis-v"></i></button>
            <ul class="c-list -linklist">
                <li class="c-list__item">
                    <a class="c-link -icon-left">
                        <i class="far fa-save"></i>
                        Speichern (Online)
                    </a>
                </li>
                <li class="c-list__item">
                    <a class="js-plausi-download c-link -icon-left">
                        <i class="far fa-download"></i>
                        Download (PDF)
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="c-action-menu__row">
        <div class="c-action-menu__dropdown">
            <button class="c-btn -small -light -dropdown -redesign">Drucken</button>
            <ul class="c-list -linklist">
                <li class="c-list__item">
                    <a class="c-link -icon-left">
                        <i class="far fa-save"></i>
                        Speichern (Online)
                    </a>
                </li>
                <li class="c-list__item">
                    <a class="c-link -icon-left">
                        <i class="far fa-download"></i>
                        Download (PDF)
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

# With JS-Panel

TIP

Combination of Action Button and Dropdown

.c-btn.-icon-btn[.-inverted, .-link, .-secondary...][data-target="#action-menu"] 
+
.c-panel.-is-dropdown#action-menu
1
2
3
hide code 
<div class="h-pos-relative">
<button type="button" class="c-btn -icon-btn -inverted" data-target="#action-menu">
    <i class="fa fa-ellipsis-v"></i>
</button>
<div class="c-panel -close-backdrop -is-dropdown -is-small" id="action-menu" role="menu" aria-haspopup="true">
    <div class="c-panel__inner">
        <ul class="c-list -linklist -fullwidth">
            <li class="c-list__item">
                <a href="#" class="c-link -icon-left">
                    <i class="fas fa-trash"></i>
                    <span>Stoff löschen mit Word Wrapping Beispiel</span>
                </a>
            </li>
            <li class="c-list__item">
                <a href="student/" class="c-link -icon-left">
                    <i class="fas fa-info-circle"></i>
                    <span>Details</span>
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

# Small Action Btn

hide code 
<div class="h-pos-relative">
<button type="button" class="c-btn -icon-btn -small -link" data-target="#action-menu2">
    <i class="fa fa-ellipsis-v"></i>
</button>
<div class="c-panel -close-backdrop -is-dropdown -is-extra-small" id="action-menu2" role="menu" aria-haspopup="true">
    <div class="c-panel__inner">
        <ul class="c-list -linklist -fullwidth">
            <li class="c-list__item">
                <a href="#" class="c-link -icon-left">
                    <i class="fas fa-trash"></i>
                    <span>Stoff löschen</span>
                </a>
            </li>
            <li class="c-list__item">
                <a href="#" class="c-link -icon-left">
                    <i class="fas fa-info-circle"></i>
                    <span>Details</span>
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

← Contact →