Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

vertical-section

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
38
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
N/A
Represents a section within a VerticalNavigation.
1 contributor
Install vertical-section as a package?
Copied
npm i @bit/nexxtway.react-rainbow.vertical-section
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
VerticalSection
import React from 'react';
import { VerticalNavigation, VerticalSection, VerticalItem } from 'react-rainbow-components';

const containerStyles = {
    width: '220px',
    borderBottomLeftRadius: '0.875rem',
    borderRight: '1px solid #e3e5ed',
};

class SimpleVerticalNavigation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: 'item 1',
        };
        this.handleOnSelect = this.handleOnSelect.bind(this);
    }

    handleOnSelect(e, selectedItem) {
        return this.setState({ selectedItem });
    }

    render() {
        return (
            <VerticalNavigation
                selectedItem={this.state.selectedItem}
                onSelect={this.handleOnSelect}
            >
                <VerticalSection label="REPORTS">
                    <VerticalItem name="item-1" label="Recent" />
                    <VerticalItem name="item-2" label="Created by Me" />
                </VerticalSection>
                <VerticalSection label="COMPONENTS">
                    <VerticalItem
                        name="item-3"
                        label="VerticalSection"
                        href="/#/Components/VerticalSection"
                    />
                    <VerticalItem
                        name="item-4"
                        label="VerticalNavigation"
                        href="/#/Components/VerticalNavigation"
                    />
                </VerticalSection>
                <VerticalSection label="Folders">
                    <VerticalItem name="item-5" label="Created by Me" />
                    <VerticalItem name="item-6" label="Shared with Me" />
                </VerticalSection>
            </VerticalNavigation>
        );
    }
}

<div>
    <GlobalHeader src="images/user/user3.jpg" />
    <div
        className="rainbow-background-color_white rainbow-p-vertical_small"
        style={containerStyles}
    >
        <SimpleVerticalNavigation />
    </div>
</div>
Properties
NameTypeDefault valueDescription
label
string | nodenull

The heading text for this section.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied for the outer element.

children
nodenull