Filament•2mo ago

Navigation item bottom

How can I place a navigation item only at the bottom of the sidebar?

9 Replies

Peppe•2mo ago

maybe giving the highest value in the navigation sort?

XaviOP•2mo ago

i need something like this

awcodes•2mo ago

https://filamentphp.com/docs/3.x/support/render-hooks

Render hooks - Core Concepts - Filament

XaviOP•2mo ago

yes, i try it with RenderHooks, but it needs a string, and NavigationGroup it's not a string. I can add a livewire component, but i must to replicate sidebar item and i don't know how

awcodes•2mo ago

Well, you can’t just put a navigation item outside of the navigation. But you can make it look like one by copying the classes from the views.

Miguel García•2mo ago

A css solution would be: - use the navigatioSort to push/sort the latest pages/resources (Mis compras y Hablamos) to the bottom of the list, - then use css to make 100 height all elements below the main aside item (using flex utilities for instance), - and then apply margin-top: auto to the nth li item (page/resource) that you wan to push to the bottom This css code should do the trick, but use it at your own risk, this might break your side menu if you add more groups, clusters, ... (not sure) or other side menus (if any):

aside.fi-sidebar > nav,
aside.fi-sidebar > nav > ul,
aside.fi-sidebar > nav > ul > li,
aside.fi-sidebar > nav > ul > li > ul {
    flex-grow: 1;
}

aside.fi-sidebar > nav > ul > li > ul > li:nth-last-child(2) {
    margin-top: auto;
}

aside.fi-sidebar > nav,
aside.fi-sidebar > nav > ul,
aside.fi-sidebar > nav > ul > li,
aside.fi-sidebar > nav > ul > li > ul {
    flex-grow: 1;
}

aside.fi-sidebar > nav > ul > li > ul > li:nth-last-child(2) {
    margin-top: auto;
}

Miguel García•2mo ago

XaviOP•2mo ago

It works perfect @Miguel García Thank you so much!!!

Miguel García•2mo ago

@Xavi De res 😉

Gaming

Programming

Navigation item bottom