Dropdowns

<div class="btn-group dropdown dropdown-triangle">
    <button class="btn btn-brand btn-long dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="text">Dropdown</span>
        <span class="icon"><span data-feather="chevron-down" class="rui-icon rui-icon-stroke-1_5"></span></span>
    </button>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>&nbsp;

<div class="btn-group dropdown dropdown-triangle">
    <button type="button" class="btn btn-brand btn-long">Split dropdown</button>
    <button type="button" class="btn btn-brand btn-uniform dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-20">
        <span data-feather="chevron-down" class="rui-icon rui-icon-stroke-1_5">
    </button>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>

Hover

<div class="btn-group dropdown dropdown-hover dropdown-triangle dropdown-keep-open">
    <a class="dropdown-item" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span>
        <span>Dropdown</span>
        <span class="rui-nav-circle"></span>
    </a>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>&nbsp;

<div class="btn-group dropdown dropdown-hover dropdown-triangle dropdown-keep-open ml-20">
    <a class="dropdown-item" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span>Dropdown</span>
        <span data-feather="chevron-down" class="rui-icon rui-icon-stroke-1_5"></span>
    </a>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#">Action</a></li>
        <li><a class="nav-link" href="#">Another action</a></li>
        <li><a class="nav-link" href="#">Something else here</a></li>
    </ul>
</div>

Direction

Up

<div class="btn-group dropdown dropdown-triangle dropup">
    <button class="btn btn-brand btn-long dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="text">Dropdown</span>
        <span class="icon"><span data-feather="chevron-up" class="rui-icon rui-icon-stroke-1_5"></span></span>
    </button>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>&nbsp;

<div class="btn-group dropdown dropdown-triangle dropup">
    <button type="button" class="btn btn-brand btn-long">Split dropup</button>
    <button type="button" class="btn btn-brand btn-uniform dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-20">
        <span data-feather="chevron-up" class="rui-icon rui-icon-stroke-1_5">
    </button>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>

Right

<div class="btn-group dropdown dropdown-triangle dropright">
    <button class="btn btn-brand btn-long dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-20">
        <span class="text">Dropdown</span>
        <span class="icon"><span data-feather="chevron-right" class="rui-icon rui-icon-stroke-1_5"></span></span>
    </button>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>&nbsp;

<div class="btn-group dropdown dropdown-triangle dropright">
    <button type="button" class="btn btn-brand btn-long">Split dropright</button>
    <button type="button" class="btn btn-brand btn-uniform dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-20">
        <span data-feather="chevron-right" class="rui-icon rui-icon-stroke-1_5">
    </button>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>

Left

<div class="btn-group dropdown dropdown-triangle dropleft">
    <button class="btn btn-brand btn-long dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-20">
        <span class="icon"><span data-feather="chevron-left" class="rui-icon rui-icon-stroke-1_5"></span></span>
        <span class="text">Dropdown</span>
    </button>
    <ul class="dropdown-menu nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>&nbsp;

<div class="btn-group">
    <div class="btn-group dropdown dropdown-triangle dropleft">
        <button type="button" class="btn btn-brand btn-uniform dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-20">
            <span data-feather="chevron-left" class="rui-icon rui-icon-stroke-1_5">
        </button>
        <ul class="dropdown-menu nav">
            <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
            <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
            <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
        </ul>
    </div>
    <button type="button" class="btn btn-brand btn-long">Split dropleft</button>
</div>

Menu alignment

<div class="btn-group dropdown dropdown-triangle">
    <button class="btn btn-brand btn-long dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="text">Right-aligned menu</span>
        <span class="icon"><span data-feather="chevron-down" class="rui-icon rui-icon-stroke-1_5"></span></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right nav">
        <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
        <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
    </ul>
</div>

Messenger

Amber Smith

2 days ago
  • The last album.
  • I can’t open the last album!
10:19
  • Gues, I can’t open the last album...
10:20
Today
  • 123
10:29
  • Haha Amber! You are so nice! :smile:
10:30