<a href="javascript:;" class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}" {{on "click" this.onClick}} ...attributes>
    <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
        {{#if @icon}}
            <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
        {{/if}}
    </div>
    <div class="truncate w-10/12 {{@itemWrapperClass}}">{{yield}}</div>
    <div class="next-nav-item-right-side {{@itemRightSideContainerClass}}">
        {{#if @rightSideComponent}}
            {{component @rightSideComponent context=@rightSideComponentContext}}
        {{else}}
            {{#if @rightSideStatus}}
                <span class="ml-2 {{@rightSideStatusContainerClass}}">
                    {{#if @rightSideStatusText}}
                        <Badge @status={{@rightSideStatus}} @hideStatusDot={{@hideRightSideStatusDot}} class={{@rightSideStatusClass}} @disableHumanize={{@disableRightSideStatusHumanize}}>
                            {{@rightSideStatusText}}
                        </Badge>
                    {{else}}
                        <Badge @status={{@rightSideStatus}} @hideStatusDot={{@hideRightSideStatusDot}} class={{@rightSideStatusClass}} @disableHumanize={{@disableRightSideStatusHumanize}} />
                    {{/if}}
                </span>
            {{/if}}
            {{#if @dropdownButton}}
                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition={{or @dropdownHorizontalPosition "left"}} @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} @wrapperClass="{{@dropdownButtonWrapperClass}} next-nav-item-dropdown-button" @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}" @registerAPI={{this.onRegisterAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
                    <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                        {{#if @dropdownButtonMenuLabel}}
                            <div class="px-1">
                                <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
                                    {{@dropdownButtonMenuLabel}}
                                </div>
                            </div>
                            <div class="next-dd-menu-seperator"></div>
                        {{/if}}
                        {{#each @dropdownButtonActions as |action|}}
                            {{#if action.separator}}
                                <div class="next-dd-menu-seperator"></div>
                            {{else}}
                                {{#if (is-dd-item-visible action.context action.isVisible)}}
                                    <div role="group" class="px-1">
                                        {{!-- template-lint-disable no-nested-interactive --}}
                                        <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
                                            {{#if action.icon}}
                                                <span class="mr-1">
                                                    <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
                                                </span>
                                            {{/if}}
                                            {{action.label}}
                                        </a>
                                    </div>
                                {{/if}}
                            {{/if}}
                        {{/each}}
                    </div>
                </DropdownButton>
            {{/if}}
        {{/if}}
    </div>
</a>