[feature request] navbar component

[waspinator]

Petal looks great, thanks for creating it.

I think a navbar component would be a great addition to help get started. How do you feel about adding something like what bootstrap has?

https://getbootstrap.com/docs/4.1/components/navbar/

[zvuc]

Good suggestion! I've actually received this request before too from some other people around me. I'll think about what can be the best way I can implement this that will be useful for most of the users.

[markdreyer]

I'm using tab component with react/reach router for this and it works great for my simple little app!

    const navLinks = [
        { to: '/', text: 'Home' },
        { to: '/about', text: 'About' },
        { to: '/contact', text: 'Contact' },
        { to: '/news', text: 'News' }
    ]

        <div className="tab-group tab-style-01">
            <Location>
                {({ location }) =>
                    navLinks.map((lnk) =>
                        <Link key={lnk.to} to={lnk.to}>
                            <div className={`tab ${location.pathname === lnk.to ? 'selected' : ''}`} >
                                <span className="tab-label">{lnk.text}</span>
                            </div>
                        </Link>
                    )
                }
            </Location>
            <div className="tab spacer"></div>
        </div>