@schibstedspain/sui-topbar

Description

A generic topbar component including:

• A dynamic dropdown main menu with custom class wrapper.
• A placeholder to dynamically pass components inside
• A dynamic dropdown secondary menu.

Installation

Clone this repository to a local folder, cd into it and run:

$ npm install

Start working in development mode

$ npm run dev

Node dependencies

The component itself relies on the following node packages:

• "react": "^0.13.3"
• "@schibstedspain/theme-sui": "latest"

Usage

Render the component in your entry point app as follows:

React.render(<suiTopbar />,
  document.getElementById(target));

Data structure

This component has a main and secondary menu. Data is passed into the component using an array with the following structure:

const data = {
  mainmenu: [
    {item: 'main option 01', link: 'https://github.com/SUI-Components'},
    {item: 'main option 02', link: 'https://github.com/SUI-Components'},
    {...}
  ],
  secondarymenu: [
    {item: 'secondary option 01', link: 'https://github.com/SUI-Components'},
    {item: 'secondary option 02', link: 'https://github.com/SUI-Components'},
    {...}
  ]
};

## Passing children React Components inside SuiTopbar If you create a parent component you can use SuiTopbar as an scaffolding to create a customized Topbar. To fill SuiTopbar with customized content you need to pass children React components.

First of all you need to properly import SuiTopbar and your child from the node_modules folder in your parent component:

import * as SuiTopbar from '@schibstedspain/sui-topbar';
import YourCustomComponent from '../YourCustomComponent';

Then, your parent component has to include both elements, SuiTopbar gathering data as props and wrapping your custom component in the render method as follows:

render() {
    return (
        <SuiTopbar.Topbar data={this.props.data}>
          <YourCustomComponent />
        </SuiTopbar.Topbar>
    );
  }

Demo page

Check out the working demo at: http://sui-components.github.io/sui-topbar/