SubNavigation

1
import {SubNavigationConnected} from '@coveord/plasma-react';
2

3
export default () => {
4
    const exampleItems = [
5
        {label: 'Avatar', id: 'avatar'},
6
        {label: 'Titanic', id: 'titanic'},
7
        {label: 'Star Wars: The Force Awakens', id: 'star-wars'},
8
        {label: 'Jurassic World', id: 'jurasic-world'},
9
        {label: 'The Avengers', id: 'the-avengers'},
10
    ];
11

12
    return <SubNavigationConnected id="second-sub-nav" items={exampleItems} defaultSelected="star-wars" />;
13
};

1
import {SubNavigationConnected} from '@coveord/plasma-react';
2
import {ThumbsDownSize16Px, ThumbsUpSize16Px} from '@coveord/plasma-react-icons';
3

4
export default () => (
5
    <SubNavigationConnected
6
        id="third-sub-nav"
7
        items={[
8
            {
9
                label: (
10
                    <span className="flex space-between">
11
                        <span className="truncate">Avatar</span>
12
                        <ThumbsUpSize16Px />
13
                    </span>
14
                ),
15
                id: 'avatar',
16
                disabled: true,
17
            },
18
            {
19
                label: (
20
                    <span className="flex space-between">
21
                        <span className="truncate">Titanic</span>
22
                        <ThumbsUpSize16Px />
23
                    </span>
24
                ),
25
                id: 'titanic',
26
            },
27
            {
28
                label: (
29
                    <span className="flex space-between">
30
                        <span className="truncate pr1">Star Wars: The Force Awakens</span>
31
                        <ThumbsUpSize16Px />
32
                    </span>
33
                ),
34
                id: 'star-wars',
35
            },
36
            {
37
                label: (
38
                    <span className="flex space-between">
39
                        <span className="truncate">Jurassic World</span>
40
                        <ThumbsDownSize16Px />
41
                    </span>
42
                ),
43
                id: 'jurasic-world',
44
            },
45
            {
46
                label: (
47
                    <span className="flex space-between">
48
                        <span className="truncate">The Avengers</span>
49
                        <ThumbsDownSize16Px />
50
                    </span>
51
                ),
52
                id: 'the-avengers',
53
            },
54
        ]}
55
        defaultSelected="titanic"
56
    />
57
);

1
import {SubNavigationConnected} from '@coveord/plasma-react';
2

3
export default () => {
4
    const exampleItems = [
5
        {label: <h3>H3 React Node</h3>, id: 'react-node'},
6
        {
7
            label: 'Gummies',
8
            id: 'gummies',
9
            description:
10
                'Brownie cheesecake brownie shortbread toffee. Candy danish gingerbread cake powder cake. Marzipan marzipan sweet roll apple pie cupcake lollipop.',
11
        },
12
        {
13
            label: 'Cupcake',
14
            id: 'cupcake',
15
            description:
16
                'Cupcake ipsum dolor sit amet. Lemon drops croissant sesame snaps cookie jelly beans tootsie roll muffin. Liquorice liquorice fruitcake tiramisu sesame snaps sugar plum lollipop gummi bears cookie',
17
        },
18
        {label: 'Chocolate', id: 'chocolate'},
19
        {
20
            label: 'Banana',
21
            id: 'banana',
22
            description:
23
                'Sweet lollipop toffee donut candy brownie shortbread icing pudding. Caramels ice cream dragée lemon drops soufflé cotton candy cheesecake. Toffee apple pie pastry gummi bears danish.',
24
        },
25
    ];
26

27
    return <SubNavigationConnected id="first-sub-nav" items={exampleItems} />;
28
};