Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Example

Dropdown Example
dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Split button

Split buttons are used to separate a primary action from a dropdown menu of additional actions. To show the split button, set the `split` input property to `true`.

Split Dropdown
dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Size

Dropdowns can have different sizes by setting the `size` input property to `large`, `small`, or leaving it unset for the default size.

Split Dropdown
dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Disabled items

Dropdown items can be disabled by setting the `disabled` input property to `true`.

Split Dropdown
dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Active item

Dropdown items can be marked as active by setting the `cssClass` input property to `active`.

Split Dropdown
dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Headers

Dropdown headers can be added using the `ng0-dropdown-header` component.

Split Dropdown
dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Autoclose behavior

By default, dropdowns will close when clicking outside the dropdown menu or on a dropdown item. This behavior can be customized using the `autoClose` input property with the following options:

  • default: Closes on both outside and inside clicks (default behavior).
  • inside: Closes only when clicking on a dropdown item.
  • outside: Closes only when clicking outside the dropdown menu.
  • manual: Does not close automatically; must be closed programmatically.
dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Directions

Dropdowns can be displayed in different directions by setting the `placement` input property to `start`, `end`, `top`, or leaving it unset for the default `bottom` placement.

Default dropdowns:
Split dropdowns:

Directions are not implemented yet.

dropdown-example.html 
<ng0-dropdown>
    Toggle Dropdown
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

On this page: