Dropdowns

Search…
Dropdowns
To use Card, first import SharedModule in your module.
1
import {SharedModule} from '@gaxon/modules';
2
​
3
@NgModule({
4
  ...
5
  imports: [SharedModule, ...],
6
  ...
7
})
8
export class YourAppModule {
9
}
Copied!
Dropdown Basic
Preview
HTML
1
<div class="d-flex flex-wrap">
2
  <div ngbDropdown class="mr-2 mb-2">
3
    <button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
4
    <div ngbDropdownMenu>
5
      <button class="dropdown-item">Action - 1</button>
6
      <button class="dropdown-item">Another Action</button>
7
      <button class="dropdown-item">Something else is here</button>
8
    </div>
9
  </div>
10
  <div ngbDropdown placement="top-right" class="mb-2">
11
    <button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropup</button>
12
    <div ngbDropdownMenu>
13
      <button class="dropdown-item">Action - 1</button>
14
      <button class="dropdown-item">Another Action</button>
15
      <button class="dropdown-item">Something else is here</button>
16
    </div>
17
  </div>
18
</div>
19
​
Copied!
Various color Dropdowns
Preview
HTML
1
<!-- Dropdown -->
2
<div class="btn-group mr-2 mb-2" ngbDropdown>
3
​
4
  <!-- Dropdown Button -->
5
  <button type="button" class="btn btn-primary" ngbDropdownToggle>
6
    Primary
7
  </button>
8
  <!-- /dropdown button -->
9
​
10
  <!-- Dropdown Menu -->
11
  <div ngbDropdownMenu>
12
    <a class="dropdown-item" href="javascript:void(0)">Action</a>
13
    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
14
    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
15
    <div class="dropdown-divider"></div>
16
    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
17
  </div>
18
  <!-- /dropdown menu -->
19
​
20
</div>
21
<!-- /dropdown -->
22
​
23
<!-- Dropdown -->
24
<div class="btn-group mr-2 mb-2" ngbDropdown>
25
​
26
  <!-- Dropdown Button -->
27
  <button type="button" class="btn btn-secondary" ngbDropdownToggle>
28
    Secondary
29
  </button>
30
  <!-- /dropdown button -->
31
​
32
  <!-- Dropdown Menu -->
33
  <div ngbDropdownMenu>
34
    <a class="dropdown-item" href="javascript:void(0)">Action</a>
35
    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
36
    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
37
    <div class="dropdown-divider"></div>
38
    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
39
  </div>
40
  <!-- /dropdown menu -->
41
​
42
</div>
43
<!-- /dropdown -->
44
​
45
<!-- Dropdown -->
46
<div class="btn-group mr-2 mb-2" ngbDropdown>
47
​
48
  <!-- Dropdown Button -->
49
  <button type="button" class="btn btn-success" ngbDropdownToggle>
50
    Success
51
  </button>
52
  <!-- /dropdown button -->
53
​
54
  <!-- Dropdown Menu -->
55
  <div ngbDropdownMenu>
56
    <a class="dropdown-item" href="javascript:void(0)">Action</a>
57
    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
58
    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
59
    <div class="dropdown-divider"></div>
60
    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
61
  </div>
62
  <!-- /dropdown menu -->
63
​
64
</div>
65
<!-- /dropdown -->
Copied!
Button groups and split buttons
Preview
HTML
1
<div class="btn-group mr-3 mb-2">
2
  <button type="button" class="btn btn-outline-success">Plain ol' button</button>
3
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
4
    <button class="btn btn-outline-primary" ngbDropdownToggle>Drop me</button>
5
    <div class="dropdown-menu" ngbDropdownMenu>
6
      <button class="dropdown-item">One</button>
7
      <button class="dropdown-item">Two</button>
8
      <button class="dropdown-item">Four!</button>
9
    </div>
10
  </div>
11
</div>
12
​
13
<div class="btn-group mr-3 mb-2">
14
  <button type="button" class="btn btn-primary">Split me</button>
15
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
16
    <button class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
17
    <div class="dropdown-menu" ngbDropdownMenu>
18
      <button class="dropdown-item">One</button>
19
      <button class="dropdown-item">Two</button>
20
      <button class="dropdown-item">Four!</button>
21
    </div>
22
  </div>
23
</div>
24
​
Copied!
For more information about options, check the Ng-Bootstrap​
Components - Previous
Collapse
Next - Components
Progress Bar
Last modified 2yr ago
Copy link
Contents
Dropdown Basic
Various color Dropdowns
Button groups and split buttons