|
1 | 1 | # Navs |
2 | 2 |
|
3 | 3 | > Navigation available in Bootstrap share general markup and styles, |
4 | | - from the base `b-nav` class to the active and disabled states. |
| 4 | + from the base `<b-nav>` class to the active and disabled states. |
5 | 5 | Swap modifier props to switch between each style. |
6 | 6 |
|
7 | 7 | ```html |
|
13 | 13 | <b-nav-item disabled>Disabled</b-nav-item> |
14 | 14 | </b-nav> |
15 | 15 |
|
16 | | - <br> |
17 | | - <br> |
| 16 | + <br><br> |
18 | 17 |
|
19 | 18 | <b-nav tabs> |
20 | 19 | <b-nav-item active>Active</b-nav-item> |
|
23 | 22 | <b-nav-item disabled>Disabled</b-nav-item> |
24 | 23 | </b-nav> |
25 | 24 |
|
26 | | - <br> |
27 | | - <br> |
| 25 | + <br><br> |
28 | 26 |
|
29 | 27 | <b-nav pills> |
30 | 28 | <b-nav-item active>Active</b-nav-item> |
|
34 | 32 | </b-nav> |
35 | 33 | </div> |
36 | 34 |
|
37 | | -<!-- nav.vue --> |
| 35 | +<!-- nav-1.vue --> |
38 | 36 | ``` |
39 | 37 |
|
40 | 38 | ### Link Appearance |
41 | | -The base `b-nav` component is built with flexbox and provides a strong |
| 39 | +The base `<b-nav>` component is built with flexbox and provides a strong |
42 | 40 | foundation for building all types of navigation components. It includes |
43 | 41 | some style overrides (for working with lists), some link padding for larger |
44 | 42 | hit areas, and basic disabled styling. No active states are included in the base nav. |
@@ -74,48 +72,54 @@ Use the pill style by setting the prop `pills`. |
74 | 72 | Force your `b-nav` content to extend the full available width. |
75 | 73 |
|
76 | 74 | #### fill: |
77 | | -To proportionately fill all available space with your `b-nav-item`s, set |
78 | | -the `fill` prop. Notice that all horizontal space is occupied, but not |
| 75 | +To proportionately fill all available space with your `<b-nav-item>` components, |
| 76 | +set the `fill` prop. Notice that all horizontal space is occupied, but not |
79 | 77 | every nav item has the same width. |
80 | 78 |
|
81 | 79 | #### Justified: |
82 | 80 | For equal-width elements, set prop `justified` instead. All horizontal space |
83 | | -will be occupied by nav links, but unlike `fill` above, every nav item will be |
84 | | -the same width. |
| 81 | +will be occupied by nav links, but unlike `fill` above, every `<b-nav-item>` |
| 82 | +will be the same width. |
85 | 83 |
|
86 | 84 | ### Vertical variation |
87 | 85 | By default navs appear on a horizontal line. Stack your navigation by setting |
88 | 86 | the `vertical` prop. |
89 | 87 |
|
90 | 88 | ### Dropdown support |
91 | | -Use the `b-nav-item-dropdown` to place dropdown items within your nav. |
| 89 | +Use `<b-nav-item-dropdown>` to place dropdown items within your nav. |
92 | 90 |
|
93 | 91 | ```html |
94 | 92 | <b-nav pills> |
95 | 93 | <b-nav-item active>Active</b-nav-item> |
96 | 94 | <b-nav-item>Link</b-nav-item> |
97 | | - <b-nav-item-dropdown text="Dropdown 1,2,3" right-alignment> |
| 95 | + <b-nav-item-dropdown id="nav2_ddown" text="Dropdown 1,2,3" right-alignment> |
98 | 96 | <b-dropdown-item>one</b-dropdown-item> |
99 | 97 | <b-dropdown-item>two</b-dropdown-item> |
100 | 98 | <b-dropdown-divider></b-dropdown-divider> |
101 | 99 | <b-dropdown-item>three</b-dropdown-item> |
102 | 100 | </b-nav-item-dropdown> |
103 | 101 | </b-nav> |
| 102 | + |
| 103 | +<!-- nav-2.vue --> |
104 | 104 | ``` |
105 | 105 |
|
106 | 106 | ### Using in Navbar |
107 | | -When using `b-nav` within a `b-navbar`, set the `navbar-nav` prop. |
| 107 | +When using `<b-nav>` within a `<b-navbar>`, set the `navbar-nav` prop. |
108 | 108 |
|
109 | | -### Tabbed content |
110 | | -See the [`b-tabs`](./tabs) component. |
| 109 | +### Tabbed content support |
| 110 | +See the [`<b-tabs>`](./tabs) component. |
111 | 111 |
|
112 | 112 | ### Regarding accessibility |
113 | | -If you’re using `b-nav` to provide a navigation bar, be sure to add a |
114 | | -`role="navigation"` to the most logical parent container of `b-nav`, or wrap |
115 | | -a `<nav>` element around `b-nav`. Do not add the role to the `b-nav` itself, |
| 113 | +If you’re using `<b-nav>` to provide a navigation bar, be sure to add a |
| 114 | +`role="navigation"` to the most logical parent container of `<b-nav>`, or wrap |
| 115 | +a `<nav>` element around `<b-nav>`. Do **not** add the role to the `<b-nav>` itself, |
116 | 116 | as this would prevent it from being announced as an actual list by assistive technologies. |
117 | 117 |
|
| 118 | +When using a `<b-nav`-item-dropdown in your `<b-nav->`, bes ure to assign a unique `id` |
| 119 | +prop value to the `<b-nav-dropdown>` so that the apropriate `aria-*` attributes can |
| 120 | +be automatically generated. |
| 121 | + |
118 | 122 | ### See Also |
119 | | -- [`b-tabs`](./tabs) to create tabbable panes of local content, even via dropdown menus. |
120 | | -- [`b-navbar`](./navbar) a wrapper that positions branding, navigation, and other elements in a concise header. |
121 | | -- [`b-dropdown`](./dropdown) for components that you can place inside `b-nav-item-dropdown` |
| 123 | +- [`<b-tabs>`](./tabs) to create tabbable panes of local content, even via dropdown menus. |
| 124 | +- [`<b-navbar>`](./navbar) a wrapper that positions branding, navigation, and other elements in a concise header. |
| 125 | +- [`<b-dropdown>`](./dropdown) for sub-components that you can place inside `<b-nav-item-dropdown>` |
0 commit comments