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