ReactJS: Bootstrap4 NavBar with collapse and non-collapse items

Question

There's an out-the-box solution for getting a collapsible horizontal NavBar:

<Navbar inverse fixedTop fluid collapseOnSelect>
    <Navbar.Header>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <LinkContainer to={'/'} exact>
          <NavItem>
            <Glyphicon glyph='home' /> CollapseLink1
          </NavItem>
        </LinkContainer>
        <LinkContainer to={'/'}>
          <NavItem>
            <Glyphicon glyph='education' /> CollapseLink2
          </NavItem>
        </LinkContainer>
        <LinkContainer to={'/'}>
          <NavItem>
            <Glyphicon glyph='th-list' /> CollapseLink3
          </NavItem>
        </LinkContainer>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

This gives a horizontal menu on large screens:

And a vertical menu on small screens:

But suppose I want to add a couple of icon buttons, which should always stay top-right regardless of what's going on:

I've read examples of separating the collapsible from the non-collapsible items, and they all get very awkward very quickly. This must be a common requirement, is there no out-the-box approach?

What's a good method of structuring this design?

Bootstrap uses Flexbox. Even if it didn't, you could make your own div(s) that use it. — Dov Rine
– Dov Rine, Commented Jul 7, 2019 at 11:46

Akber Iqbal · Accepted Answer · 2019-07-08 10:55:29Z

You can use 'position:absolute' to control the 2 links that you're looking to style & place...

relevant js:

class App extends Component {
  constructor() {
    super();
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
      name: 'React'
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav navbar>
              <NavItem>
                <NavLink href="/components/"> Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>

          <NavbarBrand href="/" className='floatRight'>
            <a href="#">[link A]</a>
            <a href="#">[link B]</a>
          </NavbarBrand>
        </Navbar>

        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

relevant css:

.floatRight{  position: absolute;    right: 0;    top: 6px;}
.floatRight a{  padding-left:10px;}
.navbar{padding:0;}
.navbar-light .navbar-toggler {margin:10px}

complete working stackblitz here

Collectives™ on Stack Overflow

ReactJS: Bootstrap4 NavBar with collapse and non-collapse items

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related