"components/UISrefActive" | @uirouter/react
  • Public
  • Public/Protected
  • All

Module "components/UISrefActive"



Const UISrefActiveContext

UISrefActiveContext: Context<(to: string, params: {}) => () => void> = React.createContext<AddStateInfoFn>(rootAddStateInfoFn)



  • UISrefActive(__namedParameters: { children: any; className: string; classToApply: string; exact: Boolean }): Element
  • A component that applies an 'active' class when a UISref component's state is active.

    If you are using functional components, consider using the useSrefActive hook instead.

    This component works together with <a href="_components_uisref_.html#uisref">UISref</a> child components. It adds an active class to its child element when any of its children <a href="_components_uisref_.html#uisref">UISref</a>'s state is active.

    This component can be used to highlight the active state in a navigation menu.

    <UISrefActive class="active-item">
      <UISref to="homestate"><a className="menu-item">Home</a></UISref>
    // rendered when state is inactive
    <a href="/path/to/homestate" class="menu-item">Home</a>
    // rendered when state is active
    <a href="/path/to/homestate" class="menu-item active-item">Home</a>

    Note: A UISrefActive will add the class if any child UISref is active. This can be used to highlight a parent nav item if any nested child nav items are active.

    <UISrefActive class="active">
      <div className="menu-item-dropdown">
          <li><UISref to="users"><a className="menu-item">Users</a></UISref></li>
          <li><UISref to="groups"><a className="menu-item">Groups</a></UISref></li>
    // rendered with either users or groups states are active
    <div className="active menu-item-dropdown">


    • __namedParameters: { children: any; className: string; classToApply: string; exact: Boolean }
      • children: any
      • className: string
      • classToApply: string
      • exact: Boolean

    Returns Element

Generated using TypeDoc