Header dropdown menus

import React from 'react';
import { SvgIcon, Heading } from 'seduo-ui';

const Example = () => (
    <div>
        <div
            className="dropdown-menu dropdown-menu--header position-relative show mr-7"
            aria-labelledby="headerMenu"
            data-placement="bottom-start"
        >
            <ul className="header__menu-list">
                <li className="header__menu-item">
                    <Heading level={6} className="header__menu-header">
                        <strong>Navigation</strong>
                    </Heading>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        <SvgIcon kind="People" className="header__icon header__menu-icon" /> Components
                    </a>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        <SvgIcon kind="Settings" className="header__icon header__menu-icon" /> Typography
                    </a>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        <SvgIcon kind="Pencil" className="header__icon header__menu-icon" /> Utilities
                    </a>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        <SvgIcon kind="Power" className="header__icon header__menu-icon" /> Compositions
                    </a>
                </li>
            </ul>
        </div>

        <div
            className="dropdown-menu dropdown-menu-right dropdown-menu--header position-relative show"
            aria-labelledby="headerMenu"
            data-placement="bottom-end"
        >
            <ul className="header__menu-list">
                <li className="header__menu-item">
                    <Heading level={6} className="header__menu-header">
                        <strong>Navigation</strong>
                    </Heading>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        Components
                    </a>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        Typography
                    </a>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        Utilities
                    </a>
                </li>
                <li className="header__menu-item">
                    <a className="header__menu-link" href="#">
                        Compositions
                    </a>
                </li>
            </ul>
        </div>
    </div>
);

export default Example;

Header Dropdown Categories

import React from 'react';
import { SvgIcon } from 'seduo-ui';
import CategoryList from '../../../src/components/Category/CategoryList';
const items = [
    {
        title: 'Category #1',
    },
    {
        title: 'Category with long name #2',
    },
    {
        title: 'Category #3',
        iconKind: 'ExclamationMarkTriangle',
    },
];

const Example = () => (
    <div>
        <div
            className="dropdown-menu dropdown-menu--header position-relative show mr-7"
            aria-labelledby="headerMenu"
            data-placement="bottom-start"
        >
            <CategoryList items={items} />
        </div>
    </div>
);

export default Example;

Header dropdown with light background

import React from 'react';
import { CategoryList } from 'seduo-ui';
const items = [
    {
        title: 'Category #1',
    },
    {
        title: 'Category with long name #2',
    },
    {
        title: 'Category #3',
        iconKind: 'ExclamationMarkTriangle',
    },
];

const Example = () => (
    <div>
        <div
            className="dropdown-menu dropdown-menu--header dropdown-menu--background position-relative show mr-7"
            aria-labelledby="headerMenu"
            data-placement="bottom-start"
        >
            <CategoryList items={items} />
        </div>
    </div>
);

export default Example;