Lightweight navigation library tailored for seamless screen transitions using URL-based navigation, nested graphs, and dynamic parameters, optimized for modern web applications.
MoeNav is a lightweight, flexible, and powerful navigation library designed exclusively for Jetpack Compose for Web (WASM). Inspired by Android's Navigation Component, it provides NavHost, NavController, and nested navigation graphs, solving issues related to URLs, browser history, and deep linking.
🚀 Optimized for Kotlin Multiplatform (WASM) and JVM not for Android.
settings.gradle.ktsdependencyResolutionManagement {
repositories {
mavenCentral() // ✅ Required for MoeNav
}
}build.gradle.ktsdependencies {
implementation("com.blank.moenav:MoeNav:<version>")
}✅ Jetpack Compose Web (WASM) Navigation → Seamlessly navigate between screens.
✅ URL-Based Navigation → Uses the browser's address bar for real URLs.
✅ Nested Navigation Graphs → Organize routes into logical groups.
✅ Browser History Support → Back/Forward buttons work as expected.
✅ Deep Linking → Load specific pages directly via URL.
✅ Dynamic Parameters → Pass values via URL (/user/{id}).
✅ OnDestinationChanged Listener → Get notified when navigation changes.
📌
Define a NavController and specify your routes and start destination, pass the navController as needed:
@OptIn(ExperimentalComposeUiApi::class)
fun main() {
val navController = MoeNavController.createWithBrowserHistory(
routes = SampleRoutes.routes,
startDestination = SampleRoutes.Home
)
val body: HTMLElement = document.body ?: return
ComposeViewport(body) {
App(navController)
}
}or for JVM Desktop
fun main() = application {
val navController = MoeNavController.createWithHistory(
routes = SampleRoutes.routes,
startDestination = SampleRoutes.Home
)
Window(
onCloseRequest = ::exitApplication,
title = "MoeNav Sample"
) {
App(navController)
}
}Define a NavHost and specify your start destination:
@Composable
fun App(navController: MoeNavController<SampleRoutes>) {
NavHost(navController = navController) {
composable("/") { HomeScreen(navController) }
composable("/about") { AboutScreen(navController) }
}
}Use navController.navigate(route) to switch between pages:
@Composable
fun HomeScreen(navController: MoeNavController<SampleRoutes>) {
Column {
Text("🏠 Home Screen")
Button(onClick = { navController.navigate(SampleRoutes.Profile) }) {
Text("Go to Profile")
}
}
}Routes can include path parameters:
NavHost(navController = navController) {
composable("/user/{userId}") { params ->
val userId = params["userId"] ?: "Unknown"
UserScreen(navController, userId)
}
}📌 Navigating with Parameters:
navController.navigate("/user/123")Define sub-graphs for better organization:
NavHost(navController = navController) {
composable("/loading") { LoadingScreen(navController) }
navigation(route = "/auth", startDestination = "/auth/login") {
composable("/auth/login") { LoginScreen(navController) }
composable("/auth/register") { RegisterScreen(navController) }
}
}This lets you group related screens (/auth/login, /auth/register).
Use OnDestinationChangedListener to track when the route changes:
navController.setOnDestinationChangedListener { route ->
println("Navigated to: $route")
}Enable browser back button support:
navController.enableBackNavigation()MoeNav is released under the MIT License.
Contributions are welcome! Feel free to:
A modern, flexible, and developer-friendly navigation solution for Compose Web (WASM).
Built with ❤️ by Mohamad
MoeNav is a lightweight, flexible, and powerful navigation library designed exclusively for Jetpack Compose for Web (WASM). Inspired by Android's Navigation Component, it provides NavHost, NavController, and nested navigation graphs, solving issues related to URLs, browser history, and deep linking.
🚀 Optimized for Kotlin Multiplatform (WASM) and JVM not for Android.
settings.gradle.ktsdependencyResolutionManagement {
repositories {
mavenCentral() // ✅ Required for MoeNav
}
}build.gradle.ktsdependencies {
implementation("com.blank.moenav:MoeNav:<version>")
}✅ Jetpack Compose Web (WASM) Navigation → Seamlessly navigate between screens.
✅ URL-Based Navigation → Uses the browser's address bar for real URLs.
✅ Nested Navigation Graphs → Organize routes into logical groups.
✅ Browser History Support → Back/Forward buttons work as expected.
✅ Deep Linking → Load specific pages directly via URL.
✅ Dynamic Parameters → Pass values via URL (/user/{id}).
✅ OnDestinationChanged Listener → Get notified when navigation changes.
📌
Define a NavController and specify your routes and start destination, pass the navController as needed:
@OptIn(ExperimentalComposeUiApi::class)
fun main() {
val navController = MoeNavController.createWithBrowserHistory(
routes = SampleRoutes.routes,
startDestination = SampleRoutes.Home
)
val body: HTMLElement = document.body ?: return
ComposeViewport(body) {
App(navController)
}
}or for JVM Desktop
fun main() = application {
val navController = MoeNavController.createWithHistory(
routes = SampleRoutes.routes,
startDestination = SampleRoutes.Home
)
Window(
onCloseRequest = ::exitApplication,
title = "MoeNav Sample"
) {
App(navController)
}
}Define a NavHost and specify your start destination:
@Composable
fun App(navController: MoeNavController<SampleRoutes>) {
NavHost(navController = navController) {
composable("/") { HomeScreen(navController) }
composable("/about") { AboutScreen(navController) }
}
}Use navController.navigate(route) to switch between pages:
@Composable
fun HomeScreen(navController: MoeNavController<SampleRoutes>) {
Column {
Text("🏠 Home Screen")
Button(onClick = { navController.navigate(SampleRoutes.Profile) }) {
Text("Go to Profile")
}
}
}Routes can include path parameters:
NavHost(navController = navController) {
composable("/user/{userId}") { params ->
val userId = params["userId"] ?: "Unknown"
UserScreen(navController, userId)
}
}📌 Navigating with Parameters:
navController.navigate("/user/123")Define sub-graphs for better organization:
NavHost(navController = navController) {
composable("/loading") { LoadingScreen(navController) }
navigation(route = "/auth", startDestination = "/auth/login") {
composable("/auth/login") { LoginScreen(navController) }
composable("/auth/register") { RegisterScreen(navController) }
}
}This lets you group related screens (/auth/login, /auth/register).
Use OnDestinationChangedListener to track when the route changes:
navController.setOnDestinationChangedListener { route ->
println("Navigated to: $route")
}Enable browser back button support:
navController.enableBackNavigation()MoeNav is released under the MIT License.
Contributions are welcome! Feel free to:
A modern, flexible, and developer-friendly navigation solution for Compose Web (WASM).
Built with ❤️ by Mohamad