# Showing/Hiding menu based on users details

**URL:** <https://community.fliplet.com/t/showing-hiding-menu-based-on-users-details/116>\
**Category:** Get Help\
**Created:** [June 30, 2021, 10:13am UTC](https://community.fliplet.com/t/showing-hiding-menu-based-on-users-details/116 "2021-06-30T10:13:52Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Deb](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/deb/32/159_2.png) [@Deb](https://community.fliplet.com/u/Deb)\
**Post date:** [June 30, 2021, 10:13am UTC](https://community.fliplet.com/t/showing-hiding-menu-based-on-users-details/116/1 "2021-06-30T10:13:52Z")

</div>

This guide is for people who are looking to hide or show menu options based on some data from the logged in users data.

The easiest way to manage this is to create separate menu blocks for each type of category you want to show or hide.

In my example I have used the List(no images) component. I have dropped 3 instances of that component each for 3 different types of users.

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/8384a937174dd17057c56b7089ed9962902473b6.png)

The first block is shown to all users all the time. The next 2 blocks are only shown if the logged in user is from the IT department or an Admin respectively.

This all depends on what data is set against each user in the data source. In this example I have the following details set but it can obviously be anything specific to your app.

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/f33b612547d8614b8cb690cbffa0bfec1427be3c.png)

The following classes need to be added to the HTML so that it can be hidden. I added the standard-user, admin-user and IT-user classes.

```auto
<fl-simple-list cid="7737868" class="standard-user"></fl-simple-list>
<fl-simple-list cid="7739104" class="admin-user"></fl-simple-list>
<fl-simple-list cid="7739191" class="IT-user"></fl-simple-list>

```

Then use the following CSS to hide the relevant list blocks:

```auto
.fl-widget-instance.admin-user{
  display: none!important
}

.fl-widget-instance.IT-user{
  display: none!important
}

```

The following JS is need to show the elements based on the logged in users data:

```auto
Fliplet.User.getCachedSession().then(function (session) {
  var user = _.get(session, 'entries.dataSource.data');

  if (!user) {
    return; // user is not logged in
  }

  if (user.Department === 'IT'){
    $('.fl-widget-instance.IT-user').attr('style','display: block !important');
  }
  
  if (user.Admin === 'Yes'){
    $('.fl-widget-instance.admin-user').attr('style','display: block !important');
  }
});

```

---

_[View the full topic](https://community.fliplet.com/t/showing-hiding-menu-based-on-users-details/116)._