diff --git a/examples/basic/src/pages/nav_bar/mod.rs b/examples/basic/src/pages/nav_bar/mod.rs
index 5e21699..2e42643 100644
--- a/examples/basic/src/pages/nav_bar/mod.rs
+++ b/examples/basic/src/pages/nav_bar/mod.rs
@@ -3,9 +3,22 @@ use melt_ui::mobile::NavBar;
 
 #[component]
 pub fn NavBarPage(cx: Scope) -> impl IntoView {
+    let click_text = create_rw_signal(cx, String::from("none"));
+
+    let click_left = SignalSetter::map(cx, move |_| {
+        click_text.set("left".to_string())
+    });
+
+    let click_right = SignalSetter::map(cx, move |_| {
+        click_text.set("right".to_string())
+    });
+
     view! { cx,
         <div style="height: 100vh; background: #f5f5f5">
-            <NavBar title="Home" left_arrow=true left_text="back" right_text="add"/>
+            <NavBar title="Home" left_arrow=true left_text="back" right_text="add" click_left=click_left click_right=click_right/>
+            <div style="padding-top: 50px">
+                { move || click_text.get() }
+            </div>
         </div>
     }
 }
\ No newline at end of file
diff --git a/src/mobile/nav_bar/mod.rs b/src/mobile/nav_bar/mod.rs
index 5dcf6b1..2d081d4 100644
--- a/src/mobile/nav_bar/mod.rs
+++ b/src/mobile/nav_bar/mod.rs
@@ -2,6 +2,7 @@ use crate::utils::mount_style::mount_style;
 use leptos::*;
 use leptos_icons::*;
 use stylers::style_sheet_str;
+use web_sys::MouseEvent;
 
 #[component]
 pub fn NavBar(
@@ -9,10 +10,24 @@ pub fn NavBar(
     #[prop(optional, into)] title: MaybeSignal<String>,
     #[prop(optional, into)] left_arrow: MaybeSignal<bool>,
     #[prop(optional, into)] left_text: MaybeSignal<String>,
+    #[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
     #[prop(optional, into)] right_text: MaybeSignal<String>,
+    #[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
+
 ) -> impl IntoView {
     let class_name = mount_style("nav-bar", || style_sheet_str!("./src/mobile/nav_bar/nav-bar.css"));
 
+    let onclick_left = move |ev| {
+        if let Some(click_left) = click_left {
+            click_left.set(ev);
+        }
+    };
+    let onclick_right = move |ev| {
+        if let Some(click_right) = click_right {
+            click_right.set(ev);
+        }
+    };
+
     view! { cx, class=class_name,
         <div class="melt-nav-bar">
             {
@@ -20,7 +35,7 @@ pub fn NavBar(
                     let left_text = left_text.get();
                     if left_arrow.get() || !left_text.is_empty() {
                         view! { cx, class=class_name,
-                            <div class="melt-nav-bar__left">
+                            <div class="melt-nav-bar__left" on:click=onclick_left>
                                 {
                                     if left_arrow.get() {
                                         view! { cx,
@@ -46,7 +61,7 @@ pub fn NavBar(
                     let right_text = right_text.get();
                     if !right_text.is_empty() {
                         view! { cx, class=class_name,
-                            <div class="melt-nav-bar__right">
+                            <div class="melt-nav-bar__right" on:click=onclick_right>
                                 { right_text }
                             </div>
                         }.into()