react-router-dom NavLink TypeScript Examples

Source File: MobileHeader.tsx From anchor-web-app with Apache License 2.0

6 votes

function NavMenu({
  to,
  title,
  close,
}: RouteMenu & {
  close: () => void;
}) {
  const match = useMatch({
    path: to,
  });

  return (
    <div data-active={!!match}>
      <NavLink to={to} onClick={close}>
        {title}
      </NavLink>
    </div>
  );
}

Source File: inPageNav.tsx From mano-aloe with MIT License

6 votes

export default function InPageNav() {
    const classes = useStyles();

    return (
        <div className="in-page-nav">
            <NavLink to={"/game"}>
                <Button variant="contained" startIcon={<SportsEsportsIcon />} size="large" color="primary" className={classes.containedPrimary}>
                    Games
                </Button>
            </NavLink>
            <NavLink to={"/art"}>
                <Button variant="contained" startIcon={<PhotoLibraryIcon />} size="large" color="primary" className={classes.containedPrimary}>
                    Gallery
                </Button>
            </NavLink>
        </div>
    );
}

Source File: App.tsx From react-tutorials with MIT License

6 votes

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://github.com/EliEladElrom/react-tutorials"
          target="_blank"
          rel="noopener noreferrer"
        >
          Eli Elad Elrom - React Tutorials
        </a>

        <List>
          {[{ name: 'MyPage', url: '/MyPage' }].map((itemObject, index) => (
            <NavLink className="App-link" to={itemObject.url} key={itemObject.url}>
              <ListItem>{itemObject.name}</ListItem>
            </NavLink>
          ))}
        </List>
      </header>
    </div>
  )
}

Source File: index.tsx From generator-earth with MIT License

6 votes

FooterBar = (/*{match, location, history}*/) => {

    return (

        <div className='m-footer-bar'>

            <NavLink to='/home' activeClassName='tab-selected'>tab1</NavLink>
            <NavLink to='/site' activeClassName='tab-selected'>tab2</NavLink>
            <NavLink to='/my' activeClassName='tab-selected'>tab3</NavLink>

        </div>

    )

}

Source File: index.tsx From Tiquet with MIT License

6 votes

Navbar = ({
  logout,
  toggleCookiesModal,
}: NavbarProps): JSX.Element => {
  const handleManageCookies = (e) => {
    e.preventDefault();
    toggleCookiesModal();
  }

  return (
    <div className="navigation">
      <a href="#" onClick={handleManageCookies} className="navigation__link">Manage cookies</a>
      <NavLink to="/boards" className="navigation__link">Boards</NavLink>
      <a href="#" onClick={() => logout()} className="navigation__link">Log out</a>
    </div>
  )
}

Source File: index.tsx From cuiswap with GNU General Public License v3.0

6 votes

StyledNavLink = styled(NavLink).attrs({
  activeClassName
})`
  ${({ theme }) => theme.flexRowNoWrap}
  align-items: center;
  justify-content: center;
  height: 3rem;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  color: ${({ theme }) => theme.text3};
  font-size: 20px;

  &.${activeClassName} {
    border-radius: 12px;
    font-weight: 500;
    color: ${({ theme }) => theme.text1};
  }

  :hover,
  :focus {
    color: ${({ theme }) => darken(0.1, theme.text1)};
  }
`

Source File: MobileMenu.tsx From index-ui with MIT License

6 votes

StyledLink = styled(NavLink)`
  box-sizing: border-box;
  color: ${(props) => props.theme.colors.grey[500]};
  font-size: 18px;
  font-weight: 700;
  padding: ${(props) => props.theme.spacing[3]}px
    ${(props) => props.theme.spacing[4]}px;
  text-align: center;
  text-decoration: none;
  width: 100%;
  &:hover {
    color: ${(props) => props.theme.colors.grey[600]};
  }
  &.active {
    color: ${(props) => props.theme.colors.primary.main};
  }
`

Source File: Styles.ts From taskcafe with MIT License

6 votes

ProjectTab = styled(NavLink)`
  font-size: 80%;
  color: ${(props) => props.theme.colors.text.primary};
  font-size: 15px;
  cursor: pointer;
  display: flex;
  line-height: normal;
  min-width: 1px;
  transition-duration: 0.2s;
  transition-property: box-shadow, color;
  white-space: nowrap;
  flex: 0 1 auto;
  padding-bottom: 12px;

  &:not(:last-child) {
    margin-right: 20px;
  }

  &:hover {
    box-shadow: inset 0 -2px ${(props) => props.theme.colors.text.secondary};
    color: ${(props) => props.theme.colors.text.secondary};
  }

  &.active {
    box-shadow: inset 0 -2px ${(props) => props.theme.colors.secondary};
    color: ${(props) => props.theme.colors.secondary};
  }
  &.active:hover {
    box-shadow: inset 0 -2px ${(props) => props.theme.colors.secondary};
    color: ${(props) => props.theme.colors.secondary};
  }
`

Source File: MainHeader.tsx From Shopping-Cart with MIT License

6 votes

MainHeader = () => {
  const { Title, Text } = Typography;
  const location = useLocation();

  const isCartedPage: boolean = location.pathname === CART_PATH;

  return (
    <>
      <Row>
        <Col xs={20} sm={12}>
          <NavLink to={PRODUCTS_LIST_PATH}>
            <Title style={titleStyle}>KYU SHOP</Title>
          </NavLink>
        </Col>
        <Col xs={4} sm={12} style={{ textAlign: 'right' }}>
          {isCartedPage ? (
            <NavLinkIconButton
              to={PRODUCTS_LIST_PATH}
              icon="appstore"
              text="상품목록"
            />
          ) : (
            <NavLinkIconButton
              to={CART_PATH}
              icon="shopping-cart"
              text="장바구니"
            />
          )}
        </Col>
      </Row>
    </>
  );
}

Source File: AirdropHeader.tsx From lobis-frontend with MIT License

6 votes

function AirdropHeader() {
    const [open, setOpen] = useState(false);

    const handleOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    let history = useHistory();

    useEscape(() => {
        if (open) handleClose;
        else history.push("/");
    });

    return (
        <div className="bond-header">
            <Link component={NavLink} to="/dashboard" className="cancel-bond">
                <SvgIcon color="primary" component={XIcon} />
            </Link>

            <div className="bond-header-logo">
                <img src={LobisLogo} width={50} />
            </div>
            <div className="bond-header-logo">
                <div className="bond-header-name"></div>
            </div>
        </div>
    );
}

Source File: TabsNavigator.tsx From pPhone2 with MIT License

6 votes

TabsNavigator: React.FC<ITabsNavigatorProps> = (props: ITabsNavigatorProps) => {

    const getLink = (tab: ITab) => {
        return (
            <NavLink key={tab.name} className="nav-link" to={tab.route} exact={!!tab.exactRoute}>
                <div className="icon-container">
                    <ReactSVG className="icon" src={tab.icon} />
                </div>
                <div>{tab.name}</div>
            </NavLink >
        )
    }

    return (
        <div>
            <nav>
                {props.tabs.map(tab => getLink(tab))}
            </nav>
        </div>

    );
}

Source File: Navbar.tsx From cra-template-typescript-redux with MIT License

6 votes

Navbar: React.FC = () => (
  <nav>
    <div className="nav-wrapper cyan darken-1 px1">
      <NavLink to="/" className="brand-logo">
        Redux + TypeScript
      </NavLink>
      <ul className="right hide-on-med-and-down">
        <li cy-data="home-nav-link">
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
      </ul>
    </div>
  </nav>
)

Source File: ApplicationBadge.tsx From amplication with Apache License 2.0

6 votes

function ApplicationBadge({
  expanded,
  url,
  name,
  color,
  large,
  hideFullName,
}: Props) {
  const badgeNode = (
    <>
      <CircleBadge name={name} color={color} />
      {!hideFullName && (
        <div className="application-badge__app-name">{name}</div>
      )}
    </>
  );
  return (
    <div
      className={classNames(
        "application-badge",
        {
          "application-badge--expanded": expanded,
        },
        {
          "application-badge--large": large,
        }
      )}
    >
      {url ? (
        <NavLink to={url}>{badgeNode}</NavLink>
      ) : (
        <span> {badgeNode} </span>
      )}
    </div>
  );
}

Source File: Header.tsx From ts-redux-react-realworld-example-app with MIT License

6 votes

function NavItem({ text, href, icon }: { text: string; href: string; icon?: string }) {
  return (
    <li className='nav-item'>
      <NavLink exact to={href} activeClassName='active' className='nav-link'>
        {icon && <i className={icon}></i>}&nbsp;
        {text}
      </NavLink>
    </li>
  );
}

Source File: Root.tsx From backstage with Apache License 2.0

6 votes

SidebarLogo = () => {
  const classes = useSidebarLogoStyles();
  const { isOpen } = useSidebarOpenState();

  return (
    <div className={classes.root}>
      <Link
        component={NavLink}
        to="/"
        underline="none"
        className={classes.link}
        aria-label="Home"
      >
        {isOpen ? <LogoFull /> : <LogoIcon />}
      </Link>
    </div>
  );
}

Source File: tabs.tsx From bitpay-browser-extension with MIT License

6 votes

Tabs: React.FC<RouteComponentProps> = ({ location: { pathname } }) => {
  const routesVisible = ['/wallet', '/shop', '/settings'];
  const shouldShow = routesVisible.includes(pathname);

  return shouldShow ? (
    <div className="tab-bar">
      <NavLink to="/wallet" activeClassName="is-active">
        <img className="inactive" alt="wallet" src="../assets/icons/wallet-icon.svg" />
        <img className="active" alt="wallet" src="../assets/icons/wallet-icon--active.svg" />
      </NavLink>
      <NavLink to="/shop" activeClassName="is-active">
        <img className="inactive" alt="shop" src="../assets/icons/shop-icon.svg" />
        <img className="active" alt="shop" src="../assets/icons/shop-icon--active.svg" />
      </NavLink>
      <NavLink to="/settings" activeClassName="is-active">
        <img className="inactive" alt="settings" src="../assets/icons/settings-icon.svg" />
        <img className="active" alt="settings" src="../assets/icons/settings-icon--active.svg" />
      </NavLink>
    </div>
  ) : null;
}

Source File: nav-item.tsx From malagu with MIT License

6 votes

export function NavItem(props: NavItemProps) {
    const { origin, path } = props;
    if (!origin || window.location.origin === origin) {
        return <NavLink to={path} component={p => (<InnerNavItem {...props} {...p}/>)}/>;
    } else {
        return <InnerNavItem {...props}/>;
    }

}

Source File: index.tsx From cheeseswap-interface with GNU General Public License v3.0

6 votes

StyledNavLink = styled(NavLink).attrs({
  activeClassName
})`
  ${({ theme }) => theme.flexRowNoWrap}
  align-items: center;
  justify-content: center;
  height: 3rem;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  color: ${({ theme }) => theme.colors.text3};
  font-size: 20px;

  &.${activeClassName} {
    border-radius: 12px;
    font-weight: 700;
    color: ${({ theme }) => theme.colors.text1};
  }

  :hover,
  :focus {
    color: ${({ theme }) => darken(0.1, theme.colors.text1)};
  }
`

Source File: Subnav.tsx From crossfeed with Creative Commons Zero v1.0 Universal

6 votes

Subnav: React.FC<Props> = (props) => {
  const { items, children, styles } = props;
  const classes = useStyles(styles)();

  return (
    <Paper classes={{ root: classes.root }}>
      {items.map((item) => (
        <NavLink
          key={item.title}
          to={item.path}
          className={classes.link}
          activeClassName={classes.active}
          exact={item.exact ?? false}
        >
          {item.title}
        </NavLink>
      ))}
      <div className={classes.flex} />
      {children}
    </Paper>
  );
}

Source File: index.tsx From project-loved-web with MIT License

6 votes

export default function Manage() {
  useTitle('Management');

  return (
    <>
      <nav className='nested'>
        <NavLink to='/admin/manage/roles'>Roles</NavLink>
        <NavLink to='/admin/manage/api-objects'>API objects</NavLink>
        <NavLink to='/admin/manage/logs'>Logs</NavLink>
        <NavLink to='/admin/manage/forum-opt-in'>Forum opt-in</NavLink>
        <NavLink to='/admin/manage/settings'>Site settings</NavLink>
      </nav>
      <Switch>
        <Route exact path='/admin/manage/roles'>
          <Roles />
        </Route>
        <ProtectedRoute exact path='/admin/manage/api-objects' role={Role.admin}>
          <ApiObjects />
        </ProtectedRoute>
        <Route exact path='/admin/manage/logs'>
          <Logs />
        </Route>
        <ProtectedRoute exact path='/admin/manage/forum-opt-in' role={[Role.captain, Role.news]}>
          <ForumOptIn />
        </ProtectedRoute>
        <ProtectedRoute exact path='/admin/manage/settings' role={Role.captain}>
          <Settings />
        </ProtectedRoute>
      </Switch>
    </>
  );
}

Source File: Tab.tsx From crust-apps with Apache License 2.0

6 votes

function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRoot, name, text }: Props): React.ReactElement<Props> {
  const to = isRoot
    ? basePath
    : `${basePath}/${name}`;

  // only do exact matching when not the fallback (first position tab),
  // params are problematic for dynamic hidden such as app-accounts
  const tabIsExact = isExact || !hasParams || index === 0;

  return (
    <NavLink
      activeClassName='tabLinkActive'
      className={`ui--Tab ${className}`}
      exact={tabIsExact}
      strict={tabIsExact}
      to={to}
    >
      <div className='tabLinkText'>
        {text}
      </div>
      {!!count && (
        <Badge
          className='tabCounter'
          color='counter'
          info={count}
        />
      )}
    </NavLink>
  );
}

Source File: BottomNav.tsx From raspiblitz-web with MIT License

6 votes

BottomNav: FC = () => {
  const { t } = useTranslation();

  return (
    <footer className="fixed bottom-0 z-10 flex h-16 w-full flex-wrap items-center justify-evenly border-t-2 bg-white shadow-inner transition-colors dark:bg-gray-800 md:hidden">
      <NavLink to="/home" className={(props) => createClassName(props)}>
        <HomeLogo className={navIconClasses} />
        <span className={navLabelClasses}>{t("navigation.home")}</span>
      </NavLink>
      <NavLink to="/apps" className={(props) => createClassName(props)}>
        <AppIcon className={navIconClasses} />
        <span className={navLabelClasses}>{t("navigation.apps")}</span>
      </NavLink>
      <NavLink to="/settings" className={(props) => createClassName(props)}>
        <SettingsIcon className={navIconClasses} />
        <span className={navLabelClasses}>{t("navigation.settings")}</span>
      </NavLink>
    </footer>
  );
}

Source File: MobileMenu.tsx From PolkaBridge-Farming with MIT License

6 votes

StyledLink = styled(NavLink)`
  box-sizing: border-box;
  color: ${(props) => props.theme.color.grey[100]};
  font-size: 24px;
  font-weight: 700;
  padding: ${(props) => props.theme.spacing[3]}px
    ${(props) => props.theme.spacing[4]}px;
  text-align: center;
  text-decoration: none;
  width: 100%;
  &:hover {
    color: ${(props) => props.theme.color.grey[500]};
  }
  &.active {
    color: ${(props) => props.theme.color.primary.main};
  }
`

Source File: MobileMenu.tsx From polkabridge-launchpad with MIT License

6 votes

StyledLink = styled(NavLink)`
  box-sizing: border-box;
  color: ${(props) => props.theme.color.grey[100]};
  font-size: 24px;
  font-weight: 700;
  padding: ${(props) => props.theme.spacing[3]}px
    ${(props) => props.theme.spacing[4]}px;
  text-align: center;
  text-decoration: none;
  width: 100%;
  &:hover {
    color: ${(props) => props.theme.color.grey[500]};
  }
  &.active {
    color: ${(props) => props.theme.color.primary.main};
  }
`

Source File: NavBar.tsx From datajoint-labbook with MIT License

6 votes

render() {
    return (
      <nav className='top-nav'>
        <Helmet>
          <title>DataJoint LabBook{this.props.hostname ? " | " + this.props.hostname : ""}</title>
        </Helmet>
        <div className='nav-logo'>
          <NavLink to='/'><img src={logo} alt='Logo' /></NavLink>
        </div>
        
        <ul className='right-nav'>
          {this.props.isLoggedIn ?
            (
              <li className='right-nav-li hostname'>
                <label>Currently connected</label>
                <h5>{this.props.hostname}</h5>
              </li>
            ) : ''
          }
          {this.props.isLoggedIn ?
            (
              <li className='right-nav-li'>
                <a href="/login">Log Out</a>
              </li>
            ) : <li className='right-nav-li'><a href="/login">Log In</a></li>
          }
        </ul>
      </nav>
    );
  }

Source File: HeaderLogo.tsx From solo with MIT License

6 votes

HeaderLogo: React.FC<HeaderLogoProps> = ({ text }) => (
  <div className={classNames("usa-logo", classes.logoHeader)}>
    {text && (
      <em className="usa-logo__text">
        <NavLink to="/">
          <img src={Logo} alt={text} className={classNames(classes.logoImg)} />
        </NavLink>
      </em>
    )}
  </div>
)

Source File: app.tsx From react-use-intercom with MIT License

6 votes

Link = styled(NavLink)`
  text-decoration: none;
  color: var(--dark);

  &:visited,
  &:active {
    text-decoration: none;
  }

  > code {
    font-size: 1rem;
  }
`

Source File: index.tsx From dyp with Do What The F*ck You Want To Public License

6 votes

StyledNavLink = styled(NavLink).attrs({
  activeClassName
})`
  ${({ theme }) => theme.flexRowNoWrap}
  align-items: left;
  // border-radius: 3rem;
  // border-bottom: 3px solid rgba(25, 101, 233, 0.5);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  color: ${({ theme }) => theme.text2};
  font-size: 1rem;
  width: fit-content;
  margin: 0 12px;
  font-weight: 500;
  &.${activeClassName} {
    // border-radius: 12px;
    border-bottom: 3px solid red;
    font-weight: 600;
    color: ${({ theme }) => theme.text1};
  }
  :hover,
  :focus {
    color: ${({ theme }) => darken(0.1, theme.text1)};
  }
`

Source File: sideBar.tsx From xiaobi with MIT License

6 votes

StyleNavUI = styled(NavLink).attrs({ activeClassName: 'active' })`
	.button {
		position: relative;
		width: 100%;
		height: 40px;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		color: ${(p) => p.theme.tabFont};

		&::before {
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 0;
			height: 2px;
			background-color: ${(p) => p.theme.tabFontHover};
			border-radius: 1px;
			transition: all 0.15s linear;
			content: '';
		}
	}

	&.active,
	&:hover {
		color: ${(p) => p.theme.tabFontHover};
		.button {
			color: ${(p) => p.theme.tabFontHover};
			background-color: ${(p) => p.theme.panelBg};
		}
		.button::before {
			width: 100%;
			transform: translateX(-50%);
		}
	}
`

react-router-dom#NavLink TypeScript Examples