# Navigation bar React component, with a "back" and a "close" variant

I am working on a component for a navigation bar. This navigation bar currently has two variations: a "back" version, and a "close" version.

I have come up with three different implementations but I am uncertain of which one is the best. Currently, I am leaning towards this implementation as it reads the best in my opinion.

const NAVIGATION_BAR_TYPE = {
back: "back",
close: "close",
}

return (
<div className={navigation-button ${type}}> <Link to={linkTo}>{text}</Link> </div> ) } NavigationBar.Close = (props) => ( <NavigationBar { ...props } type={NAVIGATION_BAR_TYPE.close} /> ) NavigationBar.Back = (props) => ( <NavigationBar { ...props } type={NAVIGATION_BAR_TYPE.back} /> ) // Usage: <NavigationBar.Close linkTo="/" />  This is similar to the first one, but you need to import the object that holds the navigation bar types: const NAVIGATION_BAR_TYPE = { back: "back", close: "close", } const NavigationBar = ({ type = NAVIGATION_BAR_TYPE.back, text, linkTo }) => { return ( <div className={navigation-button${type}}>
</div>
)
}



Or this one, leveraging props:

const NavigationBar = ({ back, close, text, linkTo }) => {
const navigationType = back ? 'back' : 'close'

return (
<div className={navigation-button \${navigationType}}>
</div>
)
}



I don't like the third solution because if I need to add more variations, I feel like it clutters the props. And I don't like the second solution because then you are importing this enum-like object to define the type.

<NavigationBar>

• It's a mix of styling and functionality. For instance: the "back" variant should expect a linkTo prop, but the "close" variant could be used on a modal, so that would expect a callback function. I think a solution like you posted may be a better. I have also considered taking an approach similar to how it is handled in iOS's UIKit. You call the UINavigationBar and you set the backBarButtonItem. I could achieve this using a backButton prop that expects a component, and pass it either a link, or a button for instance. Thanks for the input! Nov 30, 2018 at 17:05