# EUI Simple navigation with Side Nav

**URL:** <https://discuss.elastic.co/t/eui-simple-navigation-with-side-nav/343141>\
**Category:** Kibana\
**Created:** [September 15, 2023, 1:19pm UTC](https://discuss.elastic.co/t/eui-simple-navigation-with-side-nav/343141 "2023-09-15T13:19:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmp13](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tmp13/32/78005_2.png) [@tmp13](https://discuss.elastic.co/u/tmp13)\
**Post date:** [September 15, 2023, 1:19pm UTC](https://discuss.elastic.co/t/eui-simple-navigation-with-side-nav/343141/1 "2023-09-15T13:19:25Z")

</div>

Hi there.  
I have some question about Elastic UI.  
I try create simple form with some navigation

> **[Elastic UI](https://eui.elastic.co/#/navigation/side-nav)**
>
> The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts.

Can i get some examples of usage Side Nav with change EuiPageBody?  
Something like when i switch betweeen config Users and Roles in Kibana Stack Management.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/a/faa630bf7fde9310d7bf588a7e1a26fc1e532855.png)

P.S Sorry, idk where ask quiestion about Elastic UI...

---

<div class="post-metadata">

**Author:** ![nickpeihl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickpeihl/32/112622_2.png) [@nickpeihl](https://discuss.elastic.co/u/nickpeihl)\
**Post date:** [September 18, 2023, 1:58pm UTC](https://discuss.elastic.co/t/eui-simple-navigation-with-side-nav/343141/2 "2023-09-18T13:58:09Z")

</div>

Hi Petr. Using the `EuiPageTemplate` is probably the best place to start. You could include an `onClick` prop for each sidebar item to call a [set function](https://react.dev/reference/react/useState). Then pass that state as a prop to the other component.

[Here's a very simple example](https://codesandbox.io/s/wizardly-wind-hxzc4x?file=/demo.tsx).

EDIT: Sorry, I forgot to save my changes. I updated the example. 🙂

---

<div class="post-metadata">

**Author:** ![tmp13](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tmp13/32/78005_2.png) [@tmp13](https://discuss.elastic.co/u/tmp13)\
**Post date:** [October 10, 2023, 5:58am UTC](https://discuss.elastic.co/t/eui-simple-navigation-with-side-nav/343141/3 "2023-10-10T05:58:18Z")

</div>

Nice example. I guess it is exactly what i needed.  
Thnx.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 7, 2023, 5:58am UTC](https://discuss.elastic.co/t/eui-simple-navigation-with-side-nav/343141/4 "2023-11-07T05:58:25Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.