How to use st_lottie in sidebar of a multipage app?

Custom Components
1

I want to place lottie in my sidebar in a multipage app like we use add_logo from st extras…I need the lottie to be at the exact same position but I am getting error when I tried to put st_lottie() as argument of add_logo. Yup I loaded the lottie using json.load. the error was something like, “expected byte or string type…”

2

Hi @Nirmal_Kumar

I made a demo app showing the lottie image in the top portion of the sidebar.

Screenshot

Screenshot 2566-05-05 at 19.20.05
Screenshot 2566-05-05 at 19.20.051536×1430 91.9 KB

Code

Here’s how I did it:

  1. Clone a copy of the multi-page app from the GitHub template (GitHub - dataprofessor/multipage-app-starter-kit)
  2. Edit style.css file to become as follows:
[data-testid="stSidebarNav"] {
  margin-top: 300px;
}

[data-testid="stSidebarNav"]::before {
                content: "Menu";
                padding-bottom: 100px;
                margin-left: 20px;
                margin-top: 20px;
                font-size: 20px;
                font-weight: bold;
                position: relative;
                top: 90px;
            }

[data-testid="stVerticalBlock"] {
  margin-top: -550px;
}

The above CSS will move the Lottie image up by -550 px and moves the sidebar nav menu down by 300 px.
3. Edit the 🏠_Home.py app file to become as follows:

import streamlit as st
import requests
from utilities import load_css
from streamlit_lottie import st_lottie

st.set_page_config(
    page_title="Hello",
    page_icon="🏠",
)

def load_lottieurl(url: str):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

st.header("Welcome! 👋")
st.write('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet lacus nulla, vitae faucibus erat cursus ut. Nullam quam lorem, semper eu nulla sit amet, pharetra viverra mi. Donec suscipit ligula metus, nec venenatis orci pellentesque et. Quisque ac sem eros. Duis non tellus vel est dictum interdum. Nam pulvinar mattis rhoncus. In sit amet ante ut odio scelerisque ullamcorper. Aliquam hendrerit facilisis purus eu mollis. Maecenas iaculis eget turpis nec mollis.')

load_css()

# Lottie
lottie_url = "https://assets5.lottiefiles.com/packages/lf20_V9t630.json"
lottie_json = load_lottieurl(lottie_url)
with st.sidebar:
    st_lottie(lottie_json)

Here, we perform a simple insertion of the Lottie image. The specific location is modified in the CSS as shown above.

Demo app

Here’s the link to the demo app:

GitHub repo

Here’s the GitHub repo of the above mentioned multipage app with the Lottie image shown in the top portion of the sidebar:

Hope this helps!

Best regards,
Chanin

1 Like
3

That’s so kind of you @dataprofessor. Thank you so much for that. Will try and ask you if any issues.

4

Hai @dataprofessor will there be any difference in this procedure when I use single page app? Because, I tried it out but neither lottie nor other contents in the page getting displayed properly

5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.