{{-- Tasks Menu --}}
<li class="dropdown tasks-menu">
    {{-- Menu Toggle Button --}}
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-flag-o"></i>
        <span class="label label-danger">9</span>
    </a>
    <ul class="dropdown-menu">
        <li class="header">You have 9 tasks</li>
        <li>
            {{-- Inner menu: contains the tasks --}}
            <ul class="menu">
                {{-- Task item --}}
                <li>
                    <a href="#">
                        {{-- Task title and progress text --}}
                        <h3>
                            Design some buttons
                            <small class="pull-right">20%</small>
                        </h3>
                        {{-- The progress bar --}}
                        <div class="progress xs">
                            {{-- Change the css width attribute to simulate progress --}}
                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">20% Complete</span>
                            </div>
                        </div>
                    </a>
                </li>
                {{-- end task item --}}
            </ul>
        </li>
        <li class="footer">
            <a href="#">View all tasks</a>
        </li>
    </ul>
</li>