Menu

Blue logo Blue React

React component library based on Bootstrap 5

Blue React

npm version

Use Blue React

Create new project with Vite

To quickly getting started, you can use the template with Vite, React, TypeScript and Blue React. You can use degit to create a new project with this command:

npx degit bruegmann/vite-template-blue-react name-of-my-app

Install to existing project

npm i blue-react

blue-react has blue-web and bootstrap as dependencies, so these will be installed automatically.

Breaking changes between v10 and v11

Fundamental changes in MenuItem

  • Removed props
    • onClickAttached
    • iconClassName
    • labelClassName
    • caretClassName
    • caretStyle
    • isHome
    • dropdownClassName
    • dropdownStyle
    • showDropdown
    • onShowDropdown
    • supportOutside
    • outsideIgnoreClasses
  • Renamed
    • iconForActive -> iconForCurrent
    • isActive -> current
    • highlighted -> active
  • Changed behviour. Menu item no longer has built in styling if draggable. But since Menu item extends HTML Button or A element, props draggable, onDragStart etc. should still work.
  • Added
    • sm
    • lg
    • iconBefore
    • iconAfter
    • labelHidden
    • busy
    • success
    • defaultDisplay
    • buttonContent
    • as

The previous Menu Item with the older API is still available as LegacyMenuItem, but will be removed in a future release. Because of styling changes in Blue Web, it might not behave the same.

Removed deprecated components

  • Body
  • Page
  • SidebarToggler

Implementation

See the whole project: https://github.com/bruegmann/vite-template-blue-react

App (App.tsx)

import { Layout, HeaderTitle, MenuItem, SidebarMenu } from "blue-react"
import { House, HouseFill } from "react-bootstrap-icons"

import HomePage from "./pages/HomePage"

import "./styles/main.scss"

const appLogo = "/vite.svg"
const appTitle = "My App Title"

export default function App() {
    return (
        <Layout
            header={<HeaderTitle logo={appLogo} appTitle={appTitle} />}
            side={
                <SidebarMenu>
                    <MenuItem
                        href="#"
                        icon={<House />}
                        iconForActive={<HouseFill />}
                        label="Home"
                        isHome
                    />
                </SidebarMenu>
            }
        >
            <HomePage />
        </Layout>
    )
}

Page (pages/HomePage.tsx)

import { A } from "blue-react"

export default function HomePage() {
    return (
        <div className="container">
            <h1 className="page-header mt-4 mb-3">
                Yay, your new app is ready! What now?
            </h1>

            <ol>
                <li>
                    Remove this placeholder content by editing{" "}
                    <code>./src/pages/HomePage.tsx</code>.
                </li>
                <li>
                    Register more pages in <code>./src/App.tsx</code>.
                </li>
                <li>
                    Take a look at the stylesheets in <code>./src/styles</code>.
                </li>
                <li>
                    <A
                        href="https://bruegmann.github.io/blue-react/"
                        target="_blank"
                    >
                        Check out the docs
                    </A>{" "}
                    to find out more about the components, utilities and
                    classes. You'll also find many examples there.
                </li>
            </ol>
        </div>
    )
}

Styling (styles/main.scss)

$theme: #efeeee;
$body-color: #212529;
$sidebar-color: $body-color;
$header-color: $body-color;
$primary: #0d6efd;
$sidebar-indicator-color: $primary;
$scrollbar-thumb-color: $body-color;

// Enables dark mode depending on user's device settings.
// See below to see color values for dark mode.
$color-mode-type: media-query;

@import "node_modules/blue-web/dist/style.scss";

@include color-mode(dark) {
    $theme: #413c3c;

    :root {
        --theme: #{$theme};
        --bs-theme: #{$theme};
        --bs-theme-rgb: #{red($theme)}, #{green($theme)}, #{blue($theme)};
        --blue-sidebar-bg: var(--bs-theme);
        --blue-sidebar-color: white;
        --blue-app-bg: var(--bs-theme);
        --blue-scrollbar-thumb-color-rgb: 255, 255, 255;
        --blue-header-bg: var(--bs-theme);
        --blue-header-bg-rgb: var(--bs-theme-rgb);
    }

    .blue-header {
        color: white;
    }
}