Navigation

SideNavigation

A sidebar navigation is a primary navigation element that displays the architecture of the product’s features.
View source
1
import {SideNavigation, SideNavigationItem, SideNavigationMenuSection} from '@coveord/plasma-react';
2
import {CoveoIconSize16Px} from '@coveord/plasma-react-icons';
3


4
export default () => (
5
    <SideNavigation>
6
        <SideNavigationMenuSection title="Regular Section" icon={CoveoIconSize16Px}>
7
            <SideNavigationItem isActive>
8
                <a href="http://coveo.com" title="Link to Coveo">
9
                    Link to Coveo
10
                </a>
11
            </SideNavigationItem>
12
            <SideNavigationItem>
13
                <a href="http://coveo.com" title="Link to Coveo">
14
                    Another link to Coveo
15
                </a>
16
            </SideNavigationItem>
17
        </SideNavigationMenuSection>
18
    </SideNavigation>
19
);

Props

NameTypeDefaultDescription
childrenJSXRenderable
classNamestring
openedboolean
withReduxStatebooleantrue if using a connected component, false otherwise
Wheter this component is connected to the state or not

Examples

Loading section
1
import {SideNavigation, SideNavigationLoadingItem, SideNavigationMenuSection} from '@coveord/plasma-react';
2
import {CoveoIconSize16Px} from '@coveord/plasma-react-icons';
3


4
export default () => (
5
    <SideNavigation>
6
        <SideNavigationMenuSection title="Loading Section" icon={CoveoIconSize16Px}>
7
            <SideNavigationLoadingItem className="mod-width-30" />
8
            <SideNavigationLoadingItem className="mod-width-50" />
9
            <SideNavigationLoadingItem className="mod-width-40" />
10
        </SideNavigationMenuSection>
11
    </SideNavigation>
12
);
Collapsible section
1
import {SideNavigation, SideNavigationItem, SideNavigationMenuSection} from '@coveord/plasma-react';
2
import {CoveoIconSize16Px} from '@coveord/plasma-react-icons';
3
import {useState} from 'react';
4


5
export default () => {
6
    const [isExpanded, setIsExpanded] = useState(true);
7
    return (
8
        <SideNavigation>
9
            <SideNavigationMenuSection
10
                title="Collapsible Section"
11
                icon={CoveoIconSize16Px}
12
                expandable
13
                expanded={isExpanded}
14
                onClick={() => setIsExpanded(!isExpanded)}
15
            >
16
                <SideNavigationItem>
17
                    <a href="http://coveo.com" title="Link to Coveo">
18
                        Link to Coveo
19
                    </a>
20
                </SideNavigationItem>
21
                <SideNavigationItem>
22
                    <a href="http://coveo.com" title="Link to Coveo">
23
                        Another link to Coveo
24
                    </a>
25
                </SideNavigationItem>
26
            </SideNavigationMenuSection>
27
        </SideNavigation>
28
    );
29
};

No guidelines exist for SideNavigation yet.

Create guidelines