# Using an image on home screen for navigation

**URL:** <https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352>\
**Category:** Ask for Help\
**Created:** [January 8, 2024, 7:16am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352 "2024-01-08T07:16:35Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![EChamberlin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/echamberlin/32/68829_2.png) [@EChamberlin](https://community.glideapps.com/u/EChamberlin)\
**Post date:** [January 8, 2024, 7:16am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/1 "2024-01-08T07:16:35Z")

</div>

I have an app/website where I would like the navigation to be images on the home screen, with the nav bar/tabs hidden. Is this possible? I have tried a few things, including making a new data set that is the images and tried linking them to the pages they should point to but it did not work. The screen shot shows the images, but it also includes the nav bar at the top that I want to hide.

 ![Screenshot 2024-01-08 at 8.11.09 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/f/0f9f298e3231a051a0395d989a82b784745d4a52.jpeg)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 8, 2024, 7:56am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/2 "2024-01-08T07:56:20Z")

</div>

There are a few ways to do this.

- You could use a 4 column container, add an image in each column, and then configure an appropriate action on each image.
- Alternatively, you could arrange your images in a single column in the Data Editor, with one image per row, then use a collection with a custom item click action.

Your existing tabs can be hidden from the navigation bar under tab options.

---

<div class="post-metadata">

**Author:** ![EChamberlin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/echamberlin/32/68829_2.png) [@EChamberlin](https://community.glideapps.com/u/EChamberlin)\
**Post date:** [January 8, 2024, 10:09am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/3 "2024-01-08T10:09:57Z")

</div>

Thank you for your response. I cannot determine how to differentiate between the buttons. I can them to link to a tab, but they all link to the same tab?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 8, 2024, 10:12am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/4 "2024-01-08T10:12:14Z")

</div>

Which type of component are you using?

---

<div class="post-metadata">

**Author:** ![EChamberlin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/echamberlin/32/68829_2.png) [@EChamberlin](https://community.glideapps.com/u/EChamberlin)\
**Post date:** [January 8, 2024, 10:14am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/5 "2024-01-08T10:14:57Z")

</div>

Right now, a container. I do no know how to choose the 4 column container you mentioned in your first response.

---

<div class="post-metadata">

**Author:** ![EChamberlin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/echamberlin/32/68829_2.png) [@EChamberlin](https://community.glideapps.com/u/EChamberlin)\
**Post date:** [January 8, 2024, 10:20am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/6 "2024-01-08T10:20:57Z")

</div>

OK, I have a 4 column container with individual links. Now my issue is that they are stacked on top or each other and I would like them to be shown as in the original photo, is that possible?  
Also, when I turn off the visibility of the tabs, the functionality of the links goes way?  
I am unsure where most people will view my app.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 8, 2024, 10:22am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/7 "2024-01-08T10:22:43Z")

</div>

It depends on the viewport setting. Containers will automatically stack in mobile view, and unfortunately there is no way to change that behaviour.

You should see 4 side by side in desktop view, however.

Is your App going to be used more on mobile, or desktop?

---

<div class="post-metadata">

**Author:** ![EChamberlin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/echamberlin/32/68829_2.png) [@EChamberlin](https://community.glideapps.com/u/EChamberlin)\
**Post date:** [January 8, 2024, 10:25am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/8 "2024-01-08T10:25:46Z")

</div>

![Screenshot 2024-01-08 at 11.26.15](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6c168e194fdf93a003006ee0019b3feb6247079b.jpeg)  
I have it in 4 columns, one photo per column and they link to the right places. I guess I will take this for now unless there is a way to hide the top nav bar on the home screen?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 8, 2024, 10:29am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/9 "2024-01-08T10:29:17Z")

</div>

Go through your tabs one by one, and look in the Tab Options on the right hand side. You will see an option to hide them from the navigation bar.

---

<div class="post-metadata">

**Author:** ![EChamberlin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/echamberlin/32/68829_2.png) [@EChamberlin](https://community.glideapps.com/u/EChamberlin)\
**Post date:** [January 8, 2024, 10:41am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/10 "2024-01-08T10:41:07Z")

</div>

Perfect, my goals are accomplished!!! Thank you for your support.

---

<div class="post-metadata">

**Author:** ![MGA](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mga/32/50456_2.png) [@MGA](https://community.glideapps.com/u/MGA)\
**Post date:** [January 8, 2024, 11:46am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/11 "2024-01-08T11:46:44Z")

</div>

@EChamberlin

I did something similar on

[SULGAR REAL ESTATE - Properties for Sale in the Western Algarve.](https://sulgar.com/dl/western-algarve-properties-for-sale)

using a Container, Images, Separators and Buttons.

---

<div class="post-metadata">

**Author:** ![don\_pablo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/don_pablo/32/75929_2.png) [@don\_pablo](https://community.glideapps.com/u/don_pablo)\
**Post date:** [May 31, 2024, 5:52pm UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/12 "2024-05-31T17:52:53Z")

</div>

i still cant get this to work. i have the same intention, i have 3 images which i want to use as links to navigate to 3 different tabs. what’s happening is, those 3 images are being treated as a collection (i even tried creating 3 data tables with only one image each table), and so the only available action is to have any of and all of the 3 images point to the same tab. plus, i want this to have a horizontal scroll, since this will be used primarily on mobile devices. pls view screenshots. thanks

 ![Screenshot 2024-06-01 at 1.46.05 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aa9c9334c41a9f111e57fdd5d65969f814c22987.jpeg)

 ![Screenshot 2024-06-01 at 1.52.35 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c2e78bb12d3d79dd8c64b68b041d18dcdaf39ba.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 31, 2024, 11:14pm UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/13 "2024-05-31T23:14:04Z")

</div>

Create a custom action on the collection with an IF branch for each item based on a value unique to each item in the collection.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 1, 2024, 1:09am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/14 "2024-06-01T01:09:59Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7f1342bd19fd534488cbbd7adf5c26a11bb0e71d.png)

Here’s the part you need to take care of. You would want different branches of actions based on the item that is being clicked.

---

<div class="post-metadata">

**Author:** ![don\_pablo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/don_pablo/32/75929_2.png) [@don\_pablo](https://community.glideapps.com/u/don_pablo)\
**Post date:** [June 1, 2024, 3:21am UTC](https://community.glideapps.com/t/using-an-image-on-home-screen-for-navigation/69352/15 "2024-06-01T03:21:07Z")

</div>

problem solved! thanks a bunch to all who replied!!!
