Best Practices for NavBar Branding in React-Bootstrap / React-Router-Bootstrap

Question

There is an issue regarding anchor tags in React Bootstrap and React Router. I was curious on how other people have handled the situation. It is possible to just leave an anchor tag with an href such as <a href="/">Site Title</a> and avoid using IndexLinkContainer. There is also using MenuItem such as.

<Navbar.Brand>
    <IndexLinkContainer to={{pathname: '/'}}>
          <MenuItem>TitleName</MenuItem>
     </IndexLinkContainer>
 </Navbar.Brand>

However this leaves a hidious looking bullet point to the far left of the navbar. If anyone else has any ideas on how to tackle this I would appreciate it.


Show source
| javascript   | reactjs   | css   | twitter-bootstrap   | react-bootstrap   2017-01-06 08:01 1 Answers

Answers ( 1 )

  1. 2017-01-06 12:01

    That's what I did (with LinkContainer from react-router-bootstrap):

            <LinkContainer to="/" style={{ cursor: 'pointer' }}>
                <Navbar.Brand>
                    <span style={{ width: 95 }}>Some text</span>
                    <img  src="somesrc" style={{ height:20, float:'right', marginLeft:10 }}/>
                </Navbar.Brand>
            </LinkContainer>
    

    Contains site's name and logo. No bullet point but I couldn't find a way to avoid using LinkContainer..

◀ Go back