How to create menu/navigation bar?

Anvil Q&A
1

Hello!
How can I create a menu/navigation bar that shows/links to all of the pages?
Thanks!

2

There are plenty of Tutorials and Examples under “Learn”, above, but for this case, the key is here, shown when you create a new Form:

image
image613Ă—604 31.4 KB

The topmost option includes the option of a “sidebar”, where you can place your menu/navigation buttons/links.

3

Yes, thanks I’ve added this. But it is unclear how to link to other pages. Didn’t find a matching example or tutorial. Also used the search function.

4

The default Anvil app is a single-page web app. The page address (URL) doesn’t change. Instead, the content of that page changes, dynamically, in response to clicks on your links or buttons. For many apps, that’s all they need in order to do their job: provide features for their users.

If you really want multiple URLs, though, that’s certainly an option. There is an add-on library, Anvil Extras, which adds the necessary machinery. Or search these forums for “Hash Routing”.

2 Likes
5

Anvil Extras also has a Navigation module for building menus. It works with both hash routing and normal anvil routing.

6

For the original “Anvil-style” way of building and using the sidebar, see Navigation.

8

+1 for changing Anvil forms with the open_form function – though if you have the same basic menus and other components on every page and just want to change the main content, you can easily hook up a function linked to button clicks, etc. so that when you click a button to change the content, you make the current main thing component(s) visible property == False and the new one’s visible property == True.

1 Like
9

Check the response here: https://anvil.works/forum/t/form-not-found-import-error/5340

For example:


from ..Company import Company
from ..Product import Product
...

class Home(HomeTemplate):
    def __init__(self, **properties):
        # Set Form properties and Data Bindings.
        self.init_components(**properties)

...

    def product_asset_link_click(self, **event_args):
      product=Product()
      self.content_panel.clear()
      self.content_panel.add_component(product)

    def company_asset_link_click(self, **event_args):
      company=Company()
      self.content_panel.clear()
      self.content_panel.add_component(company)