Skip to content

Commit 3c20bd7

Browse files
TechQueryTechQuery
committed
[add] Nav & TabList components
1 parent aec463e commit 3c20bd7

2 files changed

Lines changed: 549 additions & 0 deletions

File tree

‎document/source/components/Nav.mdx‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
---
2+
layout: docs
3+
title: Nav
4+
description: Documentation and examples for how to use Bootstrap’s included navigation components.
5+
group: Components
6+
---
7+
8+
import { Nav } from 'boot-cell/source/Navigator/Nav';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## Base nav
13+
14+
The base `<Nav />` component is built with flexbox and provide a strong foundation for building all types of navigation components.
15+
It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
16+
17+
<Example>
18+
<Nav
19+
list={[
20+
{ title: 'Active', href: 'javascript: void;' },
21+
{ title: 'Link', href: 'javascript: void;' },
22+
{ title: 'Link', href: 'javascript: void;' },
23+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
24+
]}
25+
/>
26+
</Example>
27+
28+
```JavaScript
29+
import { render } from 'web-cell';
30+
import { Nav } from 'boot-cell/source/Navigator/Nav';
31+
32+
render(
33+
<Nav
34+
list={[
35+
{ title: 'Active', href: 'javascript: void;' },
36+
{ title: 'Link', href: 'javascript: void;' },
37+
{ title: 'Link', href: 'javascript: void;' },
38+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
39+
]}
40+
/>
41+
);
42+
```
43+
44+
## Available styles
45+
46+
Change the style of `<Nav />` component with modifiers and utilities. Mix and match as needed, or build your own.
47+
48+
### Horizontal alignment
49+
50+
Change the horizontal alignment of your nav with `align` property.
51+
By default, navs are left-aligned, but you can easily change them to center or right aligned.
52+
53+
Centered with `align="center"`:
54+
55+
<Example>
56+
<Nav
57+
align="center"
58+
list={[
59+
{ title: 'Active', href: 'javascript: void;' },
60+
{ title: 'Link', href: 'javascript: void;' },
61+
{ title: 'Link', href: 'javascript: void;' },
62+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
63+
]}
64+
/>
65+
</Example>
66+
67+
```JavaScript
68+
import { render } from 'web-cell';
69+
import { Nav } from 'boot-cell/source/Navigator/Nav';
70+
71+
render(
72+
<Nav
73+
align="center"
74+
list={[
75+
{ title: 'Active', href: 'javascript: void;' },
76+
{ title: 'Link', href: 'javascript: void;' },
77+
{ title: 'Link', href: 'javascript: void;' },
78+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
79+
]}
80+
/>
81+
);
82+
```
83+
84+
Right-aligned with `align="end"`:
85+
86+
<Example>
87+
<Nav
88+
align="end"
89+
list={[
90+
{ title: 'Active', href: 'javascript: void;' },
91+
{ title: 'Link', href: 'javascript: void;' },
92+
{ title: 'Link', href: 'javascript: void;' },
93+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
94+
]}
95+
/>
96+
</Example>
97+
98+
```JavaScript
99+
import { render } from 'web-cell';
100+
import { Nav } from 'boot-cell/source/Navigator/Nav';
101+
102+
render(
103+
<Nav
104+
align="end"
105+
list={[
106+
{ title: 'Active', href: 'javascript: void;' },
107+
{ title: 'Link', href: 'javascript: void;' },
108+
{ title: 'Link', href: 'javascript: void;' },
109+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
110+
]}
111+
/>
112+
);
113+
```
114+
115+
### Vertical
116+
117+
Stack your navigation by changing `direction` property with `column` value.
118+
119+
<Example>
120+
<Nav
121+
direction="column"
122+
list={[
123+
{ title: 'Active', href: 'javascript: void;' },
124+
{ title: 'Link', href: 'javascript: void;' },
125+
{ title: 'Link', href: 'javascript: void;' },
126+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
127+
]}
128+
/>
129+
</Example>
130+
131+
```JavaScript
132+
import { render } from 'web-cell';
133+
import { Nav } from 'boot-cell/source/Navigator/Nav';
134+
135+
render(
136+
<Nav
137+
direction="column"
138+
list={[
139+
{ title: 'Active', href: 'javascript: void;' },
140+
{ title: 'Link', href: 'javascript: void;' },
141+
{ title: 'Link', href: 'javascript: void;' },
142+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
143+
]}
144+
/>
145+
);
146+
```
147+
148+
### Tabs
149+
150+
Takes the basic nav from above and adds the `itemMode="tabs"` property to generate a tabbed interface.
151+
Use them to create tabbable regions with our [`<TabList />` component](components/tablist).
152+
153+
<Example>
154+
<Nav
155+
itemMode="tabs"
156+
list={[
157+
{ title: 'Active', href: 'javascript: void;' },
158+
{ title: 'Link', href: 'javascript: void;' },
159+
{ title: 'Link', href: 'javascript: void;' },
160+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
161+
]}
162+
/>
163+
</Example>
164+
165+
```JavaScript
166+
import { render } from 'web-cell';
167+
import { Nav } from 'boot-cell/source/Navigator/Nav';
168+
169+
render(
170+
<Nav
171+
itemMode="tabs"
172+
list={[
173+
{ title: 'Active', href: 'javascript: void;' },
174+
{ title: 'Link', href: 'javascript: void;' },
175+
{ title: 'Link', href: 'javascript: void;' },
176+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
177+
]}
178+
/>
179+
);
180+
```
181+
182+
### Pills
183+
184+
Take that same JSX, but use `itemMode="pills"` instead:
185+
186+
<Example>
187+
<Nav
188+
itemMode="pills"
189+
list={[
190+
{ title: 'Active', href: 'javascript: void;' },
191+
{ title: 'Link', href: 'javascript: void;' },
192+
{ title: 'Link', href: 'javascript: void;' },
193+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
194+
]}
195+
/>
196+
</Example>
197+
198+
```JavaScript
199+
import { render } from 'web-cell';
200+
import { Nav } from 'boot-cell/source/Navigator/Nav';
201+
202+
render(
203+
<Nav
204+
itemMode="pills"
205+
list={[
206+
{ title: 'Active', href: 'javascript: void;' },
207+
{ title: 'Link', href: 'javascript: void;' },
208+
{ title: 'Link', href: 'javascript: void;' },
209+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
210+
]}
211+
/>
212+
);
213+
```
214+
215+
## Fill and justify
216+
217+
To proportionately fill all available space with your nav items, use `itemWidth="fill"`.
218+
Notice that all horizontal space is occupied, but not every nav item has the same width.
219+
220+
<Example>
221+
<Nav
222+
itemMode="pills"
223+
itemWidth="fill"
224+
list={[
225+
{ title: 'Active', href: 'javascript: void;' },
226+
{ title: 'Link', href: 'javascript: void;' },
227+
{ title: 'Link', href: 'javascript: void;' },
228+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
229+
]}
230+
/>
231+
</Example>
232+
233+
```JavaScript
234+
import { render } from 'web-cell';
235+
import { Nav } from 'boot-cell/source/Navigator/Nav';
236+
237+
render(
238+
<Nav
239+
itemMode="pills"
240+
itemWidth="fill"
241+
list={[
242+
{ title: 'Active', href: 'javascript: void;' },
243+
{ title: 'Link', href: 'javascript: void;' },
244+
{ title: 'Link', href: 'javascript: void;' },
245+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
246+
]}
247+
/>
248+
);
249+
```
250+
251+
For equal-width elements, use `itemWidth="justified"`. All horizontal space will be occupied by nav links,
252+
but unlike the `itemWidth="fill"` above, every nav item will be the same width.
253+
254+
<Example>
255+
<Nav
256+
itemMode="pills"
257+
itemWidth="justified"
258+
list={[
259+
{ title: 'Active', href: 'javascript: void;' },
260+
{ title: 'Link', href: 'javascript: void;' },
261+
{ title: 'Link', href: 'javascript: void;' },
262+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
263+
]}
264+
/>
265+
</Example>
266+
267+
```JavaScript
268+
import { render } from 'web-cell';
269+
import { Nav } from 'boot-cell/source/Navigator/Nav';
270+
271+
render(
272+
<Nav
273+
itemMode="pills"
274+
itemWidth="justified"
275+
list={[
276+
{ title: 'Active', href: 'javascript: void;' },
277+
{ title: 'Link', href: 'javascript: void;' },
278+
{ title: 'Link', href: 'javascript: void;' },
279+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
280+
]}
281+
/>
282+
);
283+
```

0 commit comments

Comments
 (0)