Navigation

Control navigation within the Qumra Admin panel and configure the navigation menu for your app.

useNavigate()

Navigate to different pages within the Qumra Admin:

import { useNavigate } from "@qumra/jisr";

function MyComponent() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/settings")}>
      Go to Settings
    </button>
  );
}

Options

navigate(url: string, options?: NavigateOptions)

interface NavigateOptions {
  replace?: boolean;  // Replace the current history entry
  external?: boolean; // Navigate to an external URL
}

Examples

// Navigate to a page within your app
navigate("/products");

// Replace the current page (no back button)
navigate("/dashboard", { replace: true });

// Navigate to an external URL
navigate("https://example.com", { external: true });

useNavigationMenu()

Update the navigation menu items displayed in the admin sidebar for your app:

import { useNavigationMenu } from "@qumra/jisr";

function MyApp() {
  const navigationMenu = useNavigationMenu();

  useEffect(() => {
    navigationMenu.update({
      items: [
        { label: "Dashboard", url: "/" },
        { label: "Products", url: "/products" },
        { label: "Settings", url: "/settings" },
      ],
    });
  }, []);
}

Menu Item

Property	Type	Description
label	string	Display text for the menu item.
url	string	The path to navigate to when clicked.