diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js index 25d318b1..193390bf 100644 --- a/example/src/SiteWrapper.react.js +++ b/example/src/SiteWrapper.react.js @@ -36,10 +36,17 @@ type navItem = {| +active?: boolean, +LinkComponent?: React.ElementType, +subItems?: Array, + +useExact?: boolean, |}; const navBarItems: Array = [ - { value: "Home", to: "/", icon: "home", LinkComponent: withRouter(NavLink) }, + { + value: "Home", + to: "/", + icon: "home", + LinkComponent: withRouter(NavLink), + useExact: true, + }, { value: "Interface", icon: "box", diff --git a/src/components/Nav/Nav.react.js b/src/components/Nav/Nav.react.js index d17f7fa7..77d379e0 100644 --- a/src/components/Nav/Nav.react.js +++ b/src/components/Nav/Nav.react.js @@ -22,6 +22,7 @@ type navItem = {| +active?: boolean, +LinkComponent?: React.ElementType, +subItems?: Array, + +useExact?: boolean, |}; type Props = {| @@ -123,6 +124,7 @@ class Nav extends React.Component { LinkComponent={a.LinkComponent} subItemsObjects={a.subItems} active={this.computeActive(a.active, a.to, a.subItems)} + useExact={a.useExact} /> ))) || children} diff --git a/src/components/Nav/NavItem.react.js b/src/components/Nav/NavItem.react.js index 8348d1fd..70a6d848 100644 --- a/src/components/Nav/NavItem.react.js +++ b/src/components/Nav/NavItem.react.js @@ -32,6 +32,10 @@ type Props = {| * Position of the subnav Dropdown */ +position?: Placement, + /** + * Whether or not to pass "exact" property to underlying NavLink component + */ + +useExact?: boolean, |}; type State = { @@ -68,6 +72,7 @@ class NavItem extends React.Component { active, subItems, subItemsObjects, + useExact, position = "bottom-start", }: Props = this.props; @@ -85,6 +90,7 @@ class NavItem extends React.Component { hasSubNav={hasSubNav} active={active} rootRef={ref} + useExact={useExact} > {!hasSubNav && typeof children === "string" ? children : value} @@ -98,6 +104,7 @@ class NavItem extends React.Component { RootComponent={LinkComponent} hasSubNav={hasSubNav} active={active} + useExact={useExact} > {!hasSubNav && typeof children === "string" ? children : value} diff --git a/src/components/Nav/NavLink.react.js b/src/components/Nav/NavLink.react.js index 235f4fdf..df7e9bb8 100644 --- a/src/components/Nav/NavLink.react.js +++ b/src/components/Nav/NavLink.react.js @@ -12,6 +12,7 @@ type Props = {| +to?: string, +hasSubNav?: boolean, +rootRef?: (?HTMLElement) => void, + +useExact?: boolean, |}; function NavLink({ @@ -23,6 +24,7 @@ function NavLink({ to, hasSubNav, rootRef, + useExact, }: Props): React.Node { const classes = cn({ "nav-link": true, active: active }, className); @@ -36,9 +38,8 @@ function NavLink({ {children} ); - return RootComponent ? ( - + {childrenForAll} ) : ( diff --git a/src/components/Site/SiteNav.react.js b/src/components/Site/SiteNav.react.js index 95ecacf9..ec690702 100644 --- a/src/components/Site/SiteNav.react.js +++ b/src/components/Site/SiteNav.react.js @@ -18,6 +18,7 @@ type navItem = {| +active?: boolean, +LinkComponent?: React.ElementType, +subItems?: Array, + +useExact?: boolean, |}; type navItems = Array;