Using the provided example code does not produce a navbar

[edmundsj]

I am trying to create a navbar, but when I use the example code, no menus or submenus appear visually in my browser, despite rendered HTML being present.

Using the following code (provided from README.md)

CoachingDashboard.scss

@import "~bootstrap/scss/bootstrap";
@import "react-bootstrap-sidebar-menu/dist/sidebar-menu";

CoachingDashboard.tsx

import SidebarMenu from 'react-bootstrap-sidebar-menu';
import './styles/CoachingDashboard.scss';
import logo from '../common/images/logo.png'

type Props = {
    userId: number
}

export const CoachingDashboard = ({userId}:Props) => {
    return (
    <SidebarMenu>
      <SidebarMenu.Collapse>
        <SidebarMenu.Header>
          <SidebarMenu.Brand>
            {<img src={logo}/>}
          </SidebarMenu.Brand>
          <SidebarMenu.Toggle />
        </SidebarMenu.Header>
        <SidebarMenu.Body>
          <SidebarMenu.Nav>
            <SidebarMenu.Nav.Link>
              <SidebarMenu.Nav.Icon>
                {/* Menu item icon */}
              </SidebarMenu.Nav.Icon>
              <SidebarMenu.Nav.Title>
                {'Menu Title'}
              </SidebarMenu.Nav.Title>
            </SidebarMenu.Nav.Link>
          </SidebarMenu.Nav>
          <SidebarMenu.Sub>
            <SidebarMenu.Sub.Toggle>
              <SidebarMenu.Nav.Icon />
              <SidebarMenu.Nav.Title>
                {'Submenu'}
              </SidebarMenu.Nav.Title>
            </SidebarMenu.Sub.Toggle>
            <SidebarMenu.Sub.Collapse>
              <SidebarMenu.Nav>
                <SidebarMenu.Nav.Link>
                  <SidebarMenu.Nav.Icon>
                    {/* Submenu item icon */}
                  </SidebarMenu.Nav.Icon>
                  <SidebarMenu.Nav.Title>
                    {/* Submenu item title */}
                  </SidebarMenu.Nav.Title>
                </SidebarMenu.Nav.Link>
              </SidebarMenu.Nav>
            </SidebarMenu.Sub.Collapse>
          </SidebarMenu.Sub>
        </SidebarMenu.Body>
      </SidebarMenu.Collapse>
    </SidebarMenu>
    )
}

This is the rendered HTML. It looks like the <span> tags contain the text, but it's not rendered by my browser.

<div>
        <aside
          class="sidebar-menu sidebar-menu-expand show sidebar-menu-light"
          role="navigation"
        >
          <div
            class="sidebar-menu-collapse collapse show collapse-horizontal"
          >
            <div
              class="sidebar-menu-header"
            >
              <span
                class="sidebar-menu-brand"
              >
                <img
                  src="logo.png"
                />
              </span>
              <button
                aria-label="Toggle navigation"
                class="sidebar-menu-toggle"
                type="button"
              >
                <span
                  class="sidebar-menu-toggle-icon"
                />
              </button>
            </div>
            <div
              class="sidebar-menu-body"
            >
              <div
                class="sidebar-menu-nav"
              >
                <a
                  class="sidebar-menu-nav-link"
                  href="#"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="sidebar-menu-nav-icon"
                  />
                  <span
                    class="sidebar-menu-nav-title"
                  >
                    Menu Title
                  </span>
                </a>
              </div>
              <div
                class="sidebar-menu-sub"
              >
                <button
                  aria-label="Toggle navigation"
                  class="sidebar-menu-sub-toggle collapsed"
                  type="button"
                >
                  <span
                    class="sidebar-menu-nav-icon"
                  />
                  <span
                    class="sidebar-menu-nav-title"
                  >
                    Submenu
                  </span>
                </button>
                <div
                  class="sidebar-menu-sub-collapse collapse"
                >
                  <div
                    class="sidebar-menu-nav"
                  >
                    <a
                      class="sidebar-menu-nav-link"
                      href="#"
                      role="button"
                      tabindex="0"
                    >
                      <span
                        class="sidebar-menu-nav-icon"
                      />
                      <span
                        class="sidebar-menu-nav-title"
                      />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>

Can you provide a full set of working example code so I can sandbox it and verify it's working?

[ivp-dev]

Full set of working example code you can find in this lib here and here the result of the example.

[ivp-dev]

And why this lib should produce an example of navbar? It should produce an example of sidebar. Use this lib to add navbar.

[ndmnhat]

I have the same issue with example code from README.md. I use the code from demo source and it works fine.
Here is the modified code from demo source. You can paste it to your source to see if it works for you.

<SidebarMenu
      defaultExpanded={true}
      expand="lg"
      hide="md"
    >
      <SidebarMenu.Collapse>
        <SidebarMenu.Header>
          <SidebarMenu.Brand title="React-Bootstrap" href="https://github.com/react-bootstrap/react-bootstrap">
            <span className="react-bootstrap-img" />
          </SidebarMenu.Brand>
          <SidebarMenu.Toggle />
        </SidebarMenu.Header>
        <SidebarMenu.Body>
          <SidebarMenu.Nav>
            <SidebarMenu.Nav.Link eventKey="setup">
              <SidebarMenu.Nav.Icon>1</SidebarMenu.Nav.Icon>
              <SidebarMenu.Nav.Title>How to install</SidebarMenu.Nav.Title>
            </SidebarMenu.Nav.Link>
            <SidebarMenu.Nav.Link eventKey="usage">
              <SidebarMenu.Nav.Icon>2</SidebarMenu.Nav.Icon>
              <SidebarMenu.Nav.Title>Usage</SidebarMenu.Nav.Title>
            </SidebarMenu.Nav.Link>
            <SidebarMenu.Nav.Link eventKey="overview">
              <SidebarMenu.Nav.Icon>3</SidebarMenu.Nav.Icon>
              <SidebarMenu.Nav.Title>Overview</SidebarMenu.Nav.Title>
            </SidebarMenu.Nav.Link>
            <SidebarMenu.Sub eventKey={0}>
              <SidebarMenu.Sub.Toggle>
                <SidebarMenu.Nav.Icon />
                <SidebarMenu.Nav.Title>Api</SidebarMenu.Nav.Title>
              </SidebarMenu.Sub.Toggle>
              <SidebarMenu.Sub.Collapse>
                <SidebarMenu.Nav>
                  <SidebarMenu.Nav.Link eventKey="sidebarmenu">
                    <SidebarMenu.Nav.Icon>4</SidebarMenu.Nav.Icon>
                    <SidebarMenu.Nav.Title>SidebarMenu</SidebarMenu.Nav.Title>
                  </SidebarMenu.Nav.Link>
                  <SidebarMenu.Sub eventKey={1}>
                    <SidebarMenu.Sub.Toggle>
                      <SidebarMenu.Nav.Icon />
                      <SidebarMenu.Nav.Title>Built-in elements</SidebarMenu.Nav.Title>
                    </SidebarMenu.Sub.Toggle>
                    <SidebarMenu.Sub.Collapse>
                      <SidebarMenu.Nav>
                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.nav">
                          <SidebarMenu.Nav.Icon>4.1</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Nav</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>

                        <SidebarMenu.Sub eventKey={2}>
                          <SidebarMenu.Sub.Toggle>
                            <SidebarMenu.Nav.Icon />
                            <SidebarMenu.Nav.Title>Built-in elements</SidebarMenu.Nav.Title>
                          </SidebarMenu.Sub.Toggle>
                          <SidebarMenu.Sub.Collapse>
                            <SidebarMenu.Nav>
                              <SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.link">
                                <SidebarMenu.Nav.Icon>4.1.1</SidebarMenu.Nav.Icon>
                                <SidebarMenu.Nav.Title>SidebarMenu.Nav.Link</SidebarMenu.Nav.Title>
                              </SidebarMenu.Nav.Link>
                              <SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.item">
                                <SidebarMenu.Nav.Icon>4.1.2</SidebarMenu.Nav.Icon>
                                <SidebarMenu.Nav.Title>SidebarMenu.Nav.Item</SidebarMenu.Nav.Title>
                              </SidebarMenu.Nav.Link>
                              <SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.icon">
                                <SidebarMenu.Nav.Icon>4.1.3</SidebarMenu.Nav.Icon>
                                <SidebarMenu.Nav.Title>SidebarMenu.Nav.Icon</SidebarMenu.Nav.Title>
                              </SidebarMenu.Nav.Link>
                              <SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.title">
                                <SidebarMenu.Nav.Icon>4.1.4</SidebarMenu.Nav.Icon>
                                <SidebarMenu.Nav.Title>SidebarMenu.Nav.Title</SidebarMenu.Nav.Title>
                              </SidebarMenu.Nav.Link>
                            </SidebarMenu.Nav>
                          </SidebarMenu.Sub.Collapse>
                        </SidebarMenu.Sub>

                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.sub">
                          <SidebarMenu.Nav.Icon>4.2</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Sub</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>

                        <SidebarMenu.Sub eventKey={3}>
                          <SidebarMenu.Sub.Toggle>
                            <SidebarMenu.Nav.Icon />
                            <SidebarMenu.Nav.Title>Built-in elements</SidebarMenu.Nav.Title>
                          </SidebarMenu.Sub.Toggle>
                          <SidebarMenu.Sub.Collapse>
                            <SidebarMenu.Nav>
                              <SidebarMenu.Nav.Link eventKey="sidebarmenu.sub.collapse">
                                <SidebarMenu.Nav.Icon>4.2.1</SidebarMenu.Nav.Icon>
                                <SidebarMenu.Nav.Title>SidebarMenu.Sub.Collapse</SidebarMenu.Nav.Title>
                              </SidebarMenu.Nav.Link>
                              <SidebarMenu.Nav.Link eventKey="sidebarmenu.sub.toggle">
                                <SidebarMenu.Nav.Icon>4.2.2</SidebarMenu.Nav.Icon>
                                <SidebarMenu.Nav.Title>SidebarMenu.Sub.Toggle</SidebarMenu.Nav.Title>
                              </SidebarMenu.Nav.Link>
                            </SidebarMenu.Nav>
                          </SidebarMenu.Sub.Collapse>
                        </SidebarMenu.Sub>

                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.brand">
                          <SidebarMenu.Nav.Icon>4.3</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Brand</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>
                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.toggle">
                          <SidebarMenu.Nav.Icon>4.4</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Toggle</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>
                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.collapse">
                          <SidebarMenu.Nav.Icon>4.5</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Collapse</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>
                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.text">
                          <SidebarMenu.Nav.Icon>4.6</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Text</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>
                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.header">
                          <SidebarMenu.Nav.Icon>4.7</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Header</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>
                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.body">
                          <SidebarMenu.Nav.Icon>4.8</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Body</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>
                        <SidebarMenu.Nav.Link eventKey="sidebarmenu.footer">
                          <SidebarMenu.Nav.Icon>4.9</SidebarMenu.Nav.Icon>
                          <SidebarMenu.Nav.Title>SidebarMenu.Footer</SidebarMenu.Nav.Title>
                        </SidebarMenu.Nav.Link>
                      </SidebarMenu.Nav>
                    </SidebarMenu.Sub.Collapse>
                  </SidebarMenu.Sub>
                </SidebarMenu.Nav>
              </SidebarMenu.Sub.Collapse>
            </SidebarMenu.Sub>
          </SidebarMenu.Nav>
        </SidebarMenu.Body>
        <SidebarMenu.Footer>
        </SidebarMenu.Footer>
      </SidebarMenu.Collapse>
    </SidebarMenu>

[ivp-dev]

It seems that something wrong with demo code. I will create an example in codesandbox and will share here.

[ivp-dev]

Here is an example

[marc-levin-wpe]

Just a thought, but could some example code maybe be included in the README, or at least the demo? I couldn't find this at all before I stumbled across this thread, and like OP could not get what was in the README to work.

It's a lot easier to use a library if there's a working example that you can use and then modify, as opposed to trying to work out how everything works from scratch.