How to create a Custom Drawer Navigator

Creator Lounge
1

Hey thunkers,
So how can you make a custom Drawer Navigator with icons and lists and swipes? Here’s an example of my latest task reminder which intergrates a custom Drawer Navigator into the Home Screen.

Drawer Navigator Example

image
image828×1792 109 KB

Drawer Navigator Lists based navigation are the best and easiest for users to know where and what are the items or contents. Switches are usually added to toggle a single particular item between on and off.

Also, you can add an extend list option by yourself with an arrow-extending button, example:

image
image742×168 19.1 KB

Extend results combining blocks

image

Lists are made out of rows with top and/or bottom borders. Also the swipe function from the homescreen side is made out of the block:

Touch Up: It can do a certain action on swiping

In the following video, I will demonstrate how to open it by swiping the left edge of the screen:

image

That’s all, enjoy!

UPDATE

New Version of Custom Drawer Navigator!

  • Opacity of items in background has changed, so you can see an overlap effect! (changed in UX)
  • Rounded corners list, Modern look and feel (changed in UI)
    Link to copy project:
    Thunkable

For beginners or you haven’t read to posts above yet:

The drawer navigator is in the ‘home’ screen.

How to login:

5 Likes
2

Looks amazing is this in the public gallery?

2 Likes
3

nah its custom made by me

4

Impressive. Are you planning to make a tutorial or share parts of how you achieved this?

5

Yeah I want to ask for more opinions first

6

Opinions about what?

7

The custom drawer nav. ofc. Wanna improve it

8

Nah its looks great as is, please share if possible would love to use something like this!

2 Likes
9

Sure I can share the link to the project:
Thunkable (link has been updated)
Try to understand, the app’s really complicated. By the way, the drawer navigator is in the ‘home’ screen.

1 Like
10

maybe try adding some animations

1 Like
11

It’s hard dude, but thanks for the suggestion

12

Is it good?

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

13

Looks good so far, although I dont seem to be able to get pass the create account screen and previewing just the home page just flashes up then gives a white screen both in web and live preview. Guess I’m missing something?

14

Your version is prob the older one, cuz i just updated last night. Try again in the link below?
Thunkable (The link has been updated)

Working fine in Home Screen???

image
image470×780 69.7 KB

15

u need to verify your email in you mailbox, should sent a no rely email and just simply click on the link in the email.
after verifying, go back to the app and sign in using your email and password u just typed in the sign up section, press Sign In and it should bring you to the loading screen. skip the tutorial and u will arrive the home screen

1 Like
16

Thanks its working now!
Looks great!

1 Like
17

UPDATE

New Version of Custom Drawer Navigator!

  • Opacity of items in background has changed, so you can see an overlap effect! (changed in UX)
  • Rounded corners list, Modern look and feel (changed in UI)
    Link to copy project:
    Thunkable

For beginners or you haven’t read to posts above yet:

The drawer navigator is in the ‘home’ screen.

How to login:

1 Like
18

image

Big Thanks to y’all for so many remixes of the app. I am really motivated to continue this project!
There will be updates frequently so check out the link to remix the latest version!
Link to remix project:
Thunkable

1 Like
19

URL is Expired.

20

Sorry this project has occurred errors and cannot be fixed
For the latest version:
https://x.thunkable.com/copy/09e1939b48107ac0a8f5a0a09a0e2b8f